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Welcome to 

WordPress 

WordPress is one of the most advanced content management systems on the 
planet Not only does it offer simple ways to maintain your website, but endless 
customisation options mean you can add plugins and widgets to fantastic pre-built 
themes. What's more, with WordPress you don't have to stick to what they give you, 
it's possible to buld your very own theme framework - and this book will walk you 
through how. Inside you will find in-depth guides to essential settings, 
recommended themes and plugins, and loads of tutorials for personalising your 
blog or site. WordPress is a treasure trove of goodies and it's amazing what you can 
achieve with the assistance of CSS, HTML and Photoshop. This newly revised edition 
will help you build on your existing knowledge, so you can become a true 
WordPress genius. 
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Master the new update 



WORDPRESS 4.3 IS out now, 
and includes a selection of new 
features and security fixes to 
'^r help bring your blog or website 
right up to date. 

A host of new features are available in 
WordPress 4.3. from improvements to 
the Theme Customizer view and Media 
Library interface to enhanced media 
handling in the Visual Posting view and a 
brand new interface for installing plugins. 
You'll also find some changes to the 
TinyMCE Ul when creating a new post 
and it is now possible to select a 
language when you install WordPress for 
the first time. 

These improvements all work together 
to deliver an updated, polished 



WordPress experience. Enhancements to 
managing images and videos help us 
save time with previews, while browsing 
for new plugins has become a far better 
experience, allowing you to see small 
previews in advance. 

In the background, various 
security fixes have been implemented, 
ensuring that your blog, your posts and 
any user data such as email addresses is 
protected against online intruders. 

lit is important to make sure your blog 
is up to date. This means reviewing 
plugins regularly as well as making a 
backup before you upgrade. If you've 
been holding off on recent updates, you 
shouldn't miss the most recent iteration 
of WordPress version 4.3. 



Master 
the new 
update 

WORDPRESS HAS UNDERGONE ONE OE ITS MOST 
SIGNIEICANT UPDATES, BUT IS IT REALLY ALL THAT 
DIEEERENT? WHAT'S REALLY NEW IN VERSION 4.3? 
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Master the new update 



Get to know the Dashboard 

A NEW LOOK TELLS YOU EVERYTHING YOU NEED TO KNOW WHEN YOU LOGIN TO WORDPRESS 



AT FIRST GLANCE, the Dashboard may not seem all 
that different in WordPress v.4, but on cioser 
inspection you shouid spot the Weicome panei, 
where a coilection of shortcuts can be found. 

ideal for newcomers to WordPress, the panel - which 
provides shortcuts for adding widgets, installing a new 
theme, writing a new post and adding an About page, 
as well as managing widgets and menus, turning 
comments on and off and more - can be dismissed if 
you're a more experienced user. 



Elsewhere on the Dashboard, the 'At a Glance' panel, 
your blog's comments Activity, the Quick Draft box and 
the WordPress News (useful for spotting when new 
updates are imminent!) are also available, and are as 
customisable as they were before, you are able to drag 
and drop for your own liking. You can use the Screen 



Options to determine which boxes appear and which 
remain hidden (see page 15). 

Further items will be added to the Dashboard as you 
install plugins. Several prominent apps add important 
"at a glance'-style information to the Dashboard, such 
as Jetpack's visitor stats plugin. 



€§ Further items will be added to the Dashboard 
as you install plugins 
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Get Word Press 4.3 

UPGRADE TO WORDPRESS 4.3 FOR ALL THE LATEST FEATURES 

ONE OF THE greatest aspects of WordPress is its much-admired easy installation, and the 
latest version is no different, if your biog is already running WordPress. ensure your database is 
backed up, then sign into the Dashboard, find the notification informing you that WordPress 4.3 is 
available and click the link to begin the upgrade process. 

The latest incarnation of WordPress includes all the previous features in v.4, but before checking 
them out check your current plugins and themes. This is to ensure that they are compatible with 
the latest version of WordPress just installed. Modify, update and change accordingly. 

So, what does the latest version have to offer? The big three are menus in Customizer, formatting 
shortcuts and site icons. Customizer allows users to quickly modify, update and live-preview menus, 
while the formatting options mean no need to head into the code or select text and choose an 
option, just add the right characters. Finally, add site icons to display in the Address Bar. 








§■§ After the update completes, you’ll be 
presented with the new Dashboard page 

Blogging made easier I 

WORDPRESS V.4 HAS IMPROVED TOOLS FOR AUTHORING NEW ARTIGLES I 






Creating posts 



IMPROVEMENTS TO THE way in which you compose posts in WordPress v.4 can be a benefit to new 
bloggers and those using WordPress as the publishing system for their top-rated, busy website. 

On the face of it, there are few differences with the previous version of WordPress, but these improvements 
have been gradual over the past couple of years, and as such are more secure and stable here. 

In the Add New Post screen you’ll still find the title box, the option to edit the Permalink (a vital tool in your 
SEO strategy) and to add images using the Add Media button. You may also prefer to view all of the available 
buttons in the TinyMCE text editor, possible using Toolbar Toggle. 

A notable recent addition to WordPress is the Format toolbar, which can be used to create post types such as 
standard, images-focused, video posts, galleries and more. You'll find these work best when supported by your 
blog theme. 




<above> Customising the look and feel of your blog posts has never been easier 



01: Use full page editing 

Use the Distraction Free Writing button to take the 
WordPress post editor box full-screen, and enjoy a 
completely new way of blogging. 




02: Format your posts 

Use post formats to style the published article 
appropriately - for instance, a video post might have 
the clip at the top of the page. 




03: Visual Posting 

The Visual Editor now gives you a better idea of 
how a blog post will appear when published, with 
accuracy determined by the active theme. 
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Revised media library 

CHANGES TO THE WORDPRESS MEDIA LIBRARY MAKE CHOOSING IMAGES SIMPLER 



ONE KEY ADDITION to WordPress v.4 Is an 
Improvement to the Media Library. It is now possible 
to view a larger-resolution version of an uploaded 
image and make the necessary changes with ease. 

Improvements in how your images are bandied in the 
Edit screen (IVIedia>Library>{Seiect your lmage}>Edit 
image) meanwhiie ailow you to make and save edits 
without worrying whether or not the changes you make 
will be applied. 

Although it Isn't advisable to edit images on the server 
of a busy website, sometimes it just cannot be avoided (we 
would advise that image editing usually takes place on 
your computer or tablet). 

You can also add a new title for the image, set a caption 
to be displayed when it is embedded in a post as well as 
display alt text when the image doesn't load. A description 
Is also useful! 

Whether you're editing images or words you can cycle 
between attachments uploaded by using the arrows in the 
top-right corner of the Attachment Details view. 




if The software will display the video preview, 
as it would on the sites it originates 



Top tip 

Intelligent resizing 
rearranges the ieft and right 
menus to fit above and below 
the editing box, enabiing you to 
edit your biog on smailer devices. 






Easily embed videos 

NOW THERE IS NO NEED TO PREVIEW EMBEDDED VIDEOS 

ONE GREAT WAY to attract readers - and ensure 
they hang around - Is to embed clips from video 
sharing services in your posts, and a new feature 
In WordPress v.4 Is a refined method of viewing 
these video clips. 

In the past, the video was represented by a big grey 
block, which provided a useful guide to the size of the 
embedded clip. After updating to WordPress v.4. the 
software will display the video preview, much as you 
would see it on the sites it originates (such as YouTube 
or WordPress.tv). 

Better still, if you need to preview the video clip in 
the editor, you can. which will save time waiting for 
post previews to load. 

Although editing options are limited, there are some 
choices available. If the video you embedded is the 
wrong one. you can click the pencil icon in the top left 
of the video preview to open the edit screen and input 
a different YouTube URL (WordPress reguires only the 
URL rather than the embed code). Should you want to 
remove the video, all you need to do is click the X 
button to discard it. 
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Installing plugins in Word Press 

USE THE NEW INSTALLER TOOL TO PREVIEW PLUGINS AND SAVE TIME 




Plugins made easy 

NEW USER INTEREACE TAKES THE PAIN OUT OE PLUGIN INSTALLATION 



INSTALLING PLUGINS CAN be a stressful experience. After 
backing-up your database and fiies, you then need to ensure 
the plugin you're about to install (if you even find the one 
you're looking for) is the best option for your blog. You may 
run it on a test blog first to make sure that there are no 
inadvertent side-effects. 

With WordPress v.4. the developers Automattic have 
introduced a new user interface that will alleviate some of the 
stress by presenting available plugins with a use preview that 
gives more information than was previously available. 

Now when you open the Plugins>Add New screen, you're 
presented with a selection of Featured plugins, while a second 
tab displays Popular plugins. Descriptions, ratings and update 
information is provided, along with compatibility details. To 
find out more, click More Details, and when you're happy you 
can click Install Now to add the plugin to your blog. 

A useful new feature for anyone running multiple blogs is 
Favourites, which means if you sign in through your blog, you 
can view any plugins that you marked as a favourite, making it 
easy to find in future. 



«l» tapM CJCtw 
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Get the language right 

ADJUST YOUR LANGUAGE SETTINGS EOR YOUR GONTRIBUTORS 

IF YOU RUN a blog that Is targeted at a foreign country, and have a team of bloggers 
who speak the language of that region, then It might be a wise strategy to ensure that 
they can use WordPress effectively. 

The best way to do this is to setup the biog software using their preferred ianguage, which Is 
now an option when you instaii WordPress v.4 onto a new server. 

You're probabiy famiiiar with the WordPress instailation screen, seen as you open your 
domain name in your browser after upioading the iatest unzipped version of the blog software. 
Setting your preferred language is the first option here. If you're used to using automated 
installers in cPanel or similar server admin tools, the language option will also be found here. 

Once the language Is set, it cannot be changed without reinstalling, so ensure you have 
selected the right option. 




€ € You can now get a full preview in the Theme 
Customizer as you make changes f f 



Previewing widgets 

GET THE BEST PREVIEW OE YOUR THEME YET - WITH WIDGETS! 

WORDPRESS V.4 FEATURES a few improvements to the Theme Customizer, which can be accessed in 
Appearance>Customize. Where once this was limited to changing colours and site title, it is now a far more 
powerful tool that can demonstrate the impact of any installed widgets on your chosen blog theme (as long as it is 
compatible with live widget previews) before you have installed it 

The advantage of this is clear. Whereupon once you would have added a widget, saved it and then guickly 
refreshed your blog - probably in a new browser tab - to see how it looked (and whether or not it broke your blog 
layout!) now you can get a full preview in the Theme Customizer before rolling out the changes to your readers. 

We think that this is one of the most important new developments in WordPress v.4, and once you've tried it out 
we're certain you will agree! 




<above> The Theme Customizer has become a more versatile tool that allows you to preview your widgets 



Live widgets 




01: Customize your blog 

Access the Theme Customizer via 
Appearance>Customize. Click Widgets to view 
available widgets for your blog theme sidebars. 




02: Adding a widget 

Click Add a Widget to display the widgets you can 
use, and configure the one you want to use. Observe 
how it updates as confirm options. 




03: Save your changes 

Widgets can be reordered by clicking and dragging 
and like other changes will update in the preview. 
When you're happy click Save & Publish. 
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Adjust your Screen Options 

CUSTOMISE YOUR WORDPRESS V.4 EXPERIENCE BY CONFIGURING SCREEN OPTIONS 



HOW DO YOU use WordPress? For most, it is a case of 
sign in, scrambie around iooking for the iink or feature 
you're iooking for on the Dashboard or New Post page, 
write your post, and then iogout With the addition of more 
and more piugins over time, this process can become 
increasingiy slow. 

The reason for this is simple: you're not using 
WordPress right. Using the Screen Options button, 
available at the top of almost every admin screen in the 



Dashboard, you can customise the blogging software's 
back-end to see only what you need. 

For instance, you've installed several plugins to your 
WordPress v.4 blog, and the Dashboard is beginning to 
look a bit cluttered. All you need to do in this situation is 
open the Screen Options box at the top of the browser 
window, and disable items that you don't need to see, 
don't use, or don't need to access through the Dashboard. 
Click the Screen Options button when you're done. 



Top tip 

The Screen Options button 
is available across several 
admin screens in WordPress 
v.4, such as the Add New Post, 
All Posts and Dashboard. These 
options offer freedom to 
personalise the back-end so 
you only see the elements 
you need to edit. 
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UNLEASH THE EULL POTENTIAL OE WORDPRESS WITH CUSTOM POST TYPES, TAXONOMIES AND PLUGINS 



© WORDPRESS, THE WORLD'S largest CMS, 
is powerful right out of the box. For simpler 
sites you can probably make do with its 
■=■ posts and their categories and tags, and its 
pages for more static content. Whatever you might 
need beyond that can often be solved by a plugin. 

But if you want to take your WordPress site further 
and utilise the platform's true CMS capabilities, you will 
probably want custom post types and/or custom 



taxonomies. These are two of the sharpest tools for 
WordPress developers when they are looking to build 
more complex sites where there are several different 
types of content and there is a need for more advanced 
levels of categorisation. 

To understand what custom post types are, all you 
really need to know is that the posts and pages, which 
WordPress supports by default, are in fact two post 
types. You can recreate them with new names and 



tweak them to be more tailored for your needs by 
creating your own custom post types. You can even 
unregister the standard posts and pages and replace 
them with custom post types that better fit your needs 
if you wish. 

The same goes for custom taxonomies. The default 
categories and tags are in fact taxonomies - and you 
can create your own. This opens the door to a ton of 
possibilities, as you will soon see. 
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<above>The Book custom post type from http://tdh.me, as seen in the admin interface 



Create custom post types 

CUSTOM POST TYPES UNLOCK THE TRUE CMS POTENTIAL IN WORDPRESS - AND IN 
JUST A LITTLE WHILE, SO WILL YOU 



What are they? 

Custom post types are anything you want, 
basically. Technically, it’s a little more 
complicated than that... 

As we've already established, custom post types are the 
same as the default posts and pages that the standard 
WordPress install comes shipped with. Posts have their 
own set of rules, like being able to be associated with 
categories and tags. Pages, on the other hand, don’t 
support categories and tags but they have other rules 
- like being capable of a hierarchical structure where 
one page is organised below another, and so on. 
Despite these differences, both posts and pages are 
post types. Those are not the only post types that 
WordPress comes with though: there are also 
attachments (media uploads), revision (post revisions) 
and nav menujtem (used for media items). In total, 
WordPress ships with five post types. 

When creating a custom post type, you are usually 
adding another one, although you can both alter and 
remove existing post types. This means that you could, 
if you wanted to, add a custom post type that shares all 
the features of the default WordPress page post type 
but includes support for categories as well. What a 
custom post type actually supports is something you 
decide. You can even hide a custom post type from 
view altogether if you want, not even showing it in the 
admin interface, if that's what you need. 

The custom post types you create have the freedom 
of being exactly what you want, stored as a specific 
post type in the database - just like with your posts 
and pages. 



Why you should use them 

What’sthe point of using custom posttypes 
and should you really extend beyond the 
default posts and pages at all? 

The default posts and pages post types are more than 
enough for most sites. You’ve got your news sections 
and blogs and whatnot as posts, while your static 
information, the About section for example, is a page. 
Add menu functionality (again, a post type) and media 
uploads (attachment post type) and you’ve got 
everything most sites need. 

When you want or need to step beyond that though, 
you’ll want to create custom post types. This could be 
something as simple as a custom post type for your 
books, or the groundworks of a complicated site 
structure with so many types of content that you’ll want 
to separate them from each other. It might even be for 
creating hidden search indexes (something we won’t 
delve deeper into here as it’s advanced stuff most 
people won’t have to worry about) ticking in the 
background, or it’s content meant to go into widgets for 
more flexibility. The possibilities are, as they say, endless. 

You should use custom post types to simplify and 
organise things. However, that doesn’t mean that it’s 
appropriate to use them everywhere and all the time. It 
might be tempting to have one custom post type for 
News, another for Reports, and a third one for 
Interviews but this is generally a bad idea. Don’t 
recreate sections that could just as well be categories 
(the section) and posts with custom post types, as 
that’s making things more complicated than necessary 
for yourself. 



'I 




<above> The Custom Post Type Lll interface 
isn't pretty, but it gets the job done 



Using a plugin 

If you don’t want to get down 
and dirty with the code, there 
are plugins that’ll create 
custom post types for you 

There is a WordPress plugin for just about 
everything now and creating custom post types 
isn’t any different. The thing you’ii have to 
remember is that these plugins create the post 
type for you, which means they register it with the 
parameters (name, permaiink structure, support, 
and so forth) you’ve chosen, which lets you 
manage them in the admin interface. What the 
plugins won’t do is give your theme the necessary 
functionality to display the custom post types. 
Granted, most themes will be able to display the 
posts using the default templates, but you 
probably had more in mind for your custom post 
types. The point is, you will still need to create the 
necessary theme template files for your custom 
post types - and custom taxonomies for that 
matter - if you want them to be any different to 
the theme’s defaults. 

One of the better plugins for creating custom 
post types is Custom Post Type Ul. It’s been 
around for a long time and has a good reputation 
- and it even supports creating custom 
taxonomies, despite its name. That means that 
you can create both custom post types and 
custom taxonomies with this one plugin, giving 
you a head start if you prefer to do as much as 
possible in the admin interface. 



It could be as 
simple as a custom 
post type for your 
books, or the 
grounds of a complex 
site structure •• 



WordPress Genius Guide 1 7 





Supercharge Word Press 






Code Library 

Custom post types 

Obviously there are a lot of settings and alternatives when it comes to creating a custom 
post type, so in this code snippet we’ve kept things reasonable. The code works in a 
theme’s functions.php, but should be in a compatibility plugin 

// Register Custom Post Type// 



001 function custom_post_type() { 

002 $labels = array( 


003 


‘name’ 


=> 


‘Movies’ , 


004 


‘singular_name’ 


=> 


‘Movies’ , 


005 


‘menu_name’ 


=> 


‘Movies’ , 


006 


‘ parent_item_colon ’ 


=> 


‘Parent Movies: ’ , 


007 


‘all_items’ 


=> 


‘All Movies’ , 


008 


‘ view_item’ 


=> 


‘View Movie’ , 


009 


‘add_new_item’ 


=> 


‘Add New Movie’ , 


010 


‘add_new’ 


=> 


‘Add New’ , 


011 


‘edit_item’ 


=> 


‘Edit Movie’ , 


012 


‘update_item’ 


=> 


‘Update Movie’ , 


013 


‘search_items’ 


=> 


‘Search Movies’ , 


014 


‘not_found’ 


=> 


‘Not found’ , 


015 


‘ not_found_in_trash ’ 


=> 


‘Not found in Trash’ , 


016 


); 






017 


Srewrite = array( 






018 


‘slug’ 


=> 


‘movie’ , 


019 


‘with_front’ 


=> 


true. 


020 


‘pages’ 


=> 


true. 


021 


‘feeds’ 


=> 


true. 


022 


); 






023 


$args = arrayC 






024 


‘label’ 


=> 


‘movies’ , 


025 


‘description ’ 


=> 


‘Movies’ , 


026 


‘labels’ 


=> 


Slabels, 


027 


‘supports’ 


=> 


arrayC ‘title’ , 


028 


‘editor’ , ‘excerpt’ , 


‘author’, ‘thumbnail’, ), 


029 


‘taxonomies’ 


=> 


array 


030 


( ‘post_tag’, ‘actor’ 






031 


‘hierarchical’ 


=> 


false. 


032 


‘public’ 


=> 


true. 


033 


‘ show_ui ’ 


=> 


true. 


034 


‘ show_in_menu ’ 


=> 


true. 


035 


‘ show_in_nav_menus ’ 


=> 


true. 


036 


‘show_in_admin_bar’ 


=> 


true. 


037 


‘menu_position’ 


=> 


5, 


038 


‘menu_icon’ 


=> 


‘ ’ , 


039 


‘ can_export ’ 


=> 


true. 


040 


‘has_archive’ 


=> 


true. 


041 


‘exclude_from_search’ 


=> 


false. 


042 


‘ publicly_queryable ’ 


=> 


true. 


043 


‘rewrite’ 


=> 


Srewrite, 


044 


‘capability_type’ 


=> 


‘ page ’ , 


045 


); 






046 


register_post_type( ‘movies’, $args ); 


047 


} 







All the code for creating a 
custom post type (or several) 
should go in a function. At 
the end we'll add that 
cfunction to the init action with 
add_actionO 



The array for supports 
contains information about 
what sort of elements the 
post type should support. In 
this case It's the post title field, 
the editor, the excerpt, 
choosing an author, and 
featured images 



All the details are collected 
in $args, including $labels 
and $rewrite, which you'll find 
in the $args array as well. 
These, along with the post type 
name, are passed to 
register_post_typeO 



// Hook into the ‘init’ action 
add_action( ‘init’, ‘custom_post_type’ , 0 ); 



i • Adding a separate 
selection in the 
admin interface 
might be more 
manageable than 
having an overload 
ofcategories •• 

Where to use them 

With the power of the custom post type 
unlocked, it’s hard to imagine not using them 
everywhere, right? 

Custom post types are great So great in fact that it's 
easy to start using them too much; while custom post 
types are great, they come with a few caveats. One of 
the first things you need to remember is that adding 
more options in the WordPress admin interface might 
not be a good thing. Less technical users will be 
daunted by more things to manage, if that’s the overall 
feeling of making additions. On the other hand, adding 
a separate selection in the admin interface might be 
more manageable than having an overload of 
categories to consider when working with content. As 
always, there's a thin line as to what is reasonable and 
what's not. 

Custom post types really shine on content that 
differs a lot from the traditional posts and pages. 
Product directories are an obvious choice, because 
here you'll not only want to separate the products (ie 
product post type posts) from the regular post flow of, 
say, a news section. It’s also likely that your product 
posts will need more boxes and settings than most 



Theme template 
files for custom 
post types 

Custom post types will use your theme's 
template files if possible, just like any other post 
type. These are the ones you'll probably be most 
interested in: 

Archive template: archive-X.php, where 
X is the name of the custom post type. 

Single template: single-X.php, where X is 
the name of the custom post type. 
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Smashing WordPress: 
Beyond the Blog, 4th 
Edition 
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<above> The purpose of the Book post type is to give the 
books their own part of the site, keeping them separate 
from posts and pages 

other post types; you don’t want to litter your posts and 
pages with boxes pertaining to size and shipping and 
weight and costs and whatever it else it is you need to 
describe and work with a product in such a site. 

On http://tdh.me, there's a custom post type for 
books, for exactly the same reason as stated above. 
These are the times where custom post types really 
work: when you need a different set of content, 
whether it's in the interests of being user friendly in 
terms of the need for a lot of boxes and settings, or 
because the content just doesn't belong with the 
regular flows of posts. 

Obviously there are so many other uses for custom 
post types as well. Sliders, if you have to have them, fit 
perfectly. Just use a post in a custom post type for each 
item in the slider, cut everything not needed for the 
slider posts’ content, and you’ll have something that’s 
easy to manage for the users. Posts wouldn’t do at all 
here because obviously you don’t want slider posts to 
show up in search results, so that’s another strength of 
custom post types that’s worth remembering. 

Don’t forget mobile users 

Remember that mobile apps aren’t on par 
with the browser at all times 

Something to remember about custom post types is 
that they might not work in the apps your users rely 
on. At the moment most mobile apps - for both iOS 
and Android - don’t support custom post types at all, 
which means that the users are tied to the web browser 
when working with these things. Granted, the 
WordPress admin interface will work in most modern 
mobile web browsers, but the experience is not as slick 
as the apps at this time. It’s important to be aware of 
these things because if you’ve built a news site and 
want to snap and post a breaking news item really 
guickly being able to use an app to do this might be the 
upper hand you need. 

Not surprisingly, this is also an issue for custom 
taxonomies, so do your homework first if mobile apps 
are important to the workflow. 



Create a custom taxonomy 

SOMETIMES THE DEFAULT CATEGORIES AND TAGS WONT GUT IT - THIS IS WHERE 
CUSTOM TAXONOMIES COME IN 



What are they? 

Understanding what a taxonomy actually is 
will help you put your custom taxonomies to 
better use 

WordPress ships with a set of post types and also 
has two taxonomies per default. Both categories and 
tags are taxonomies, albeit working a bit differently. 

You can see that when using the admin interface. 
Categories are a set of checkboxes where you 
choose one or several, and they can also be 
hierarchical, which is to say that a category can 
have another category as its parent. Tags aren’t like 
that at all; they’re not hierarchical and therefore have 
no relationship to each other. In the admin 
interface that means that the tag box is free text 
which often means that the tags will be a little bit more 
chaotic and less ordered than the categories due to 
user behaviour. 

A taxonomy has terms associated to it. This means 
that a category, in the category taxonomy, is a term. A 
tag in the tag taxonomy is also a term. When you create 
your own custom taxonomy, the items within it will also 
be terms. 

There is actually a third taxonomy shipping 
with WordPress. being the Post Format taxonomy. 

This one has special rules, such as that it’s not 
meant to be extended (but obviously you can 
do that), and you’re only allowed to choose one 
of the defined terms (Quote. Image, Standard, 
and so forth) for your post. You shouldn’t worry 
(or possibly mess with) the Post Format 
taxonomy, but it’s good to know what the feature 
actually is. 



Why you should use them 

Taxonomies bring order to the WordPress 
galaxy of posts, giving you even more tools to 
tie your posts together 

Categories are among the most powerful tools in the 
WordPress arsenal. Most sites can manage with just 
posts and pages (and attachments, obviously) and 
categories. With categories, you can easily create 
sections on your site, consisting of a flow of posts. 
That’s what taxonomies do best: they bring order to 
your content. 

Creating additional taxonomies gives you 
additional order, at least if you think things through 
and don’t overdo it with a taxonomy for 
everything. That said, some content might need 
some sort of sorting, be it category- or tag-like, but 
it shouldn’t be mixed with the standard posts. 

That’s when you create a custom taxonomy and 
that’s where they shine. There are obviously other 
times when custom taxonomies hold their own as 
well, such as plugins registering hidden taxonomy 
terms and such, but that’s a bit out of the scope of 
this article. 

Much like categories and tags, custom 
taxonomies can have their own archives. This is 
really useful, because it means that you’re not 
just limited to sorting content by itself, but you can 
also make the archives stand out if you like. In 
fact, much like categories can be used to 
create sections on a site, you could do the same 
with your custom taxonomies, bringing further 
order to the user experience as well as the 
administrative one. 




<above> Custom taxonomies look and behave like categories and tags, blending well with the WordPress ihterface 
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Supercharge Word Press 




Code Library 

Custom taxonomy 

// Register Custom Taxonomy 
function custom_taxonomy() { 



001 Slabels = array( 




002 


‘name’ 


=> ‘Actors’ , 


003 


‘singular_name’ 


=> ‘Actor’ , 


004 


‘menu_name’ 


=> ‘Actor’ , 


005 


‘all_items’ 


=> ‘All Actors’, 


006 


‘parent_item’ 


=> ‘Parent Actor’ , 


007 


‘ parent_i tem_colon ’ 


=> ‘Parten Actor: ’ , 


008 


‘new_item_name’ 


=> ‘New Actor’ , 


009 


‘add_new_item’ 


=> ‘Add New Actor’, 


010 


‘edit_item’ 


=> ‘Edit Actor’ , 


011 


‘update_item’ 


=> ‘Update Actor’, 


012 


‘separate_items_with_commas’ => ‘Separate Actors 




with commas’, 




013 


‘search_items’ 


=> ‘Search Actors’, 


014 


‘ add_or_remove_items ’ 


=> ‘Add or remove 




Actors’ , 




015 


‘ choose_f rom_most_used ’ 


=> ‘Choose from the 




most used Actors’, 




016 


‘not_found’ 


=> ‘Not Found’, 


017 


); 




018 


Srewrite = array( 




019 


‘slug’ 


=> ‘actor’ , 


020 


‘with_front’ 


=> true. 


021 


‘hierarchical’ 


=> false. 


022 


); 




023 


$args = array( 




024 


‘labels’ 


=> Slabels, 


025 


‘hierarchical’ 


=> false. 


026 


‘public’ 


=> true. 


027 


‘ show_ui ’ 


=> true. 


028 


‘ show_admin_column ’ 


=> true. 


029 


‘ show_in_nav_menus’ 


=> true. 


030 


‘show_tagcloud’ 


=> true. 


031 


‘ rewrite’ 


=> Srewrite, 


032 


); 




033 


register_taxonomy( ‘actor’. 


, array( ‘post’ ), $args ); 


034 } 







Custom taxonomies 
are created in a 
function that is added 
to the ihit action with 
add_actioh() in the end 



Whether a custom 
taxonomy is 
hierarchicaiornot 
decides if it’s iike 
categories (vaiue set to 
true) or iike tags (vaiue 
settofaise) 



register taxonomyO 
registers the actuai 
custom taxonomy, with 
its hame (actor), what 
post types it should 
work on (posts) and 
with what ruies (passed 
through $args) 



// Hook into the ‘init’ action 
add_action( ‘init’, ‘custom_taxonomy’ , 0 ); 



Template files for custom taxonomies 

If you want additional control over your custom taxonomies, you’ll need to add the 
appropriate template files to your theme, otherwise they’ll just revert to the default ones. 
These are the template files that you’ll probably want to consider adding: 

TAXONOMY ARCHIVE FOR A TAXONOMY ARCHIVE: GENERAL TAXONOMY ARCHIVE: 

SPECIFIC TAXONOMY: TAXONOMY-X.PHP, WHERE X TAXONOMY.PHP, WHICH WILL BE 

TAXONOMY-X-Y.PHP, WHERE IS THE NAME OF THE USED FOR ALL TAXONOMIES. 

X IS THE NAME OF THE CUSTOM CUSTOM TAXONOMY. 

TAXONOMY, ANDY IS THE 
TERM SLUG. 




<above> Showing the Actor taxonomy with some terms 



Where to use them 

Fine-grained control of your content through 
custom taxonomies is nice - but where do 
they really shine? 

There are a lot of great examples of places where 
custom taxonomies can help. Much like the category- 
powered sections of a simple site, you can add more 
ways to tie content together. The first thing you need to 
remember is that you decide which post types - be it 
default ones shipped with WordPress or custom post 
types you've created - support the custom taxonomies 
that you create. This means that you can add in 
additional taxonomies where you want to, making them 
relevant across the post types. The same goes for the 
default categories and tags. 

Custom taxonomies are often used to create 
database-like functionality. One of the better examples 
is the movie analog, where you use custom post types 
for things like genre, year of release and actors. This 
would mean that the genre custom taxonomy would be 
hierarchical, acting much like the standard categories 
do. The year of release and actor custom taxonomies 
would be non-hierarchical, which means they'll behave 
like the standard tags do. The purpose of storing this 
sort of data in a custom taxonomy, rather than a post 
meta box (custom field), is because of the archives 
you’ll get. Let's say for example that you want all the 
'Action' movies, ‘Action’ being a term in the genre 
taxonomy. Well, just like with any term, you can get an 
archive easily enough. The same goes for all the 
movies released in 1987 (the term '1987' within the 
year of release taxonomy), or the ones where Roger 
Moore is an actor (the term 'Roger Moore' in the 
actors taxonomy). 

The way you can get archives - and therefore 
useful sections on your site - from taxonomies makes 
them a very useful tool. Obviously it’s also data you can 
query should you need to; for example, by creating a 
page template detailing all the James Bond movies by 
actor. You'd have to write a separate WordPress query, 
using WP Query, for that page template, but since the 
data is there as terms in various taxonomies it's not 
such a big step. 
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Compatibility plugins 

NOW THAT YOU'VE CREATED YOUR CUSTOM POST TYPES AND TAXONOMIES, LET'S 
ENSURE THAT THEY'RE PORTABLE 



Needless to say there are a lot of things that can be 
done with custom taxonomies, much like there are a lot 
of things being done with the default tags and 
categories. The big difference is that here you have full 
control to decide what rules there are for the 
taxonomies that you create. 

Term descriptions are useful 

Describe your terms for more useful 
archive pages 

Terms, whether they're residing in the default categories 
or tags taxonomies, or in a custom taxonomy created 
by you, have a description field. Most themes forget 
about this, which is a shame since it's the perfect spot 
to add a little more reference as to what the archive 
page the user is viewing is actually all about. The 
description is managed on your term page in the 
WordPress admin interface, where you can also change 
the name and the permalink of the description. Don't 
forget this yery useful tool when deyeloping sites, with 
or without custom taxonomies. 



<above> Adding some information about Roger Moore, a 
term in the Actor taxonomy 

Getting weird 404s? 

When working with custom post types and custom 
taxonomies, sometimes you'll get completely 
unexpected 404 errors when trying to view archives 
and such. This is usually WordPress permalinks going 
wonky, so just go to Settings>Permalinks and update 
permalinks (you don't have to change anything) and 
things should be working fine again - assuming you did 
everything right in the first place, of course! 



Useful plugins 

Post Type Switcher 

wordpress.org/plugins/post- 

type-switcher 

Post Type Switcher is an excellent plugin that comes in 
handy when you need to reorganise your posts a bit. 
Basically, the plugin lets you move one post from one 
post type to another, which means that you can use 
Post Type Switcher to transform posts to pages and 
vice versa. It also means that any registered post type 
is available. 



If you've ever read about custom post types and 
custom taxonomies before in tutorials and blog posts, 
you'll notice that the most common instruction is to put 
the necessary code in your theme's 'functions.php' file. 
That works, technically, but it's a bad idea. 

Think about it: sometimes you change your theme, 
which means you'll get a new functions.php file. That in 
turn means that you'll have to move your custom post 
type and custom taxonomy code to the new functions, 
php, manually copying and pasting. This isn't a big thing 
obviously, but it's another thing to remember - and a bit 
of a nuisance. 

The better way to do this is using a compatibility 
plugin, which really is a plugin like any other, but it 
contains the code you need for things like custom post 
types and custom taxonomies. These are features and 
additions to your WordPress site that you'll want to have 
access to no matter what theme you're using, so the 
code for them should be portable between themes. By 
sticking the code in a plugin, it'll always be there and 
the only related things you'll need in your theme will be 
things that belong there, like the template files for 
custom post type single posts, or custom taxonomy 
archives, and so forth. 

You create a compatibility plugin much the same 
way as you do any other plugin. If you're unfamiliar with 
this, it's straightforward enough to pick up. All you need 
is one file, let's call it 'compatibilty.php', with the 
necessary plugin header telling WordPress that it's a 
plugin, in a similar way to how the header in a theme's 
'style.css' does for themes. 

001 <?php 

002 /* 

003 Plugin Name: Compatibility Plugin 

004 Plugin URI : http://tdh.me 

005 Description: These functions 



Term Management Tools 

wordpress.org/plugins/term-management- 

tools 

Term Management Tools is one of those plugins that is 
just plain awesome. It not only lets you change terms 
between taxonomies, letting you make categories from 
your tags for example, but it also has the ability to 
merge several terms into one. It's very useful and has 
the added bonus of being completely compatible with 
custom taxonomies. 



should not be in the theme 
functions.php file, so they are 
here instead. 

006 Version: 1.0 

007 Author: Thord Daniel Hedengren 

008 Author URI: http://tdh.me 

009 License: GPL3 

010 */ 

// Put your custom post type and custom 
taxonomy functions here! 

011 ?> 

That's it a plugin header with some basic information 
for WordPress. Having done that, all you then need to 
do is put the necessary functions, as described 
previously, in the plugin file. Upload to wp-content/ 
plugins/ and activate the plugin - and there you have it! 

Plugins are versatile 

Compatibility plugins can be useful for 
many things 

It's not only custom post type and custom taxonomy 
code that belongs in a compatibility plugin - there are 
plenty of other features that do as well. The general rule 
is that everything that needs to work if you change 
your theme should be placed in a compatibility plugin. 

One of the most common mistakes are themes with 
shortcode functionality, perhaps for including fancy pull 
quotes or product listings, or whatever really. 
Shortcodes are great, but if the necessary code 
containing their functionality is missing, then they're 
just text in brackets that'll show up within your content. 
You can easily avoid this by putting the necessary code 
for the shortcode functionality in your compatibility 
plugin, much like you do with custom post types and 
custom taxonomies. 



Types - Custom Fields and 
Custom Post Types 
Management 

bit.ly/1 hAILtO 

Types is one of those everything-and-the-kitchen-sink 
plugins you should be wary about using. This one's 
pretty good though; it gives you the tools to manage 
custom post types, taxonomies and fields. There are 
some premium features you can unlock, but the plugin 
works just fine without paying anything. 



THERE ARE OBVIOUSLY A LOT OF PLUGINS RELATED TO CUSTOM POST TYPES AND 
CUSTOM TAXONOMIES IN SOME FASHION OR ANOTHER - HERE ARE SOME TOP PICKS 
THAT MIGHT HELP YOU DECIDE WHICH TO USE 
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Getting started 

The top tools and techniques 



24 The Settings 

Get to grips with the depths of WP settings 

30 Use widgets in WordPress 

Learn how to cusotmise your blog 

31 Get to grips with plugins 

Add an extra element to your website 

32 Manage WordPress 
Comments 

start discussions on your blog 

34 Posting WordPress 
content 

Format your posts and get used to editing 

36 Mastering the Media 
Library 

Take control of the 4.0 Media Library 

38 Getting hosted with WP 

Explore the things to consider about hosts 

42 Set up a host 

Get your blog self-hosted easily 

44 Manage your different 
domains 

Handle your domains with ease 

46 Control user profiles 

Add contributors and authors to your site 

48 Back up your WP blog 

Never lose your content again 

50 Secure your WP site 

F Ight the hackers with ease 



t . By achieving mastery over 
the settings and their options 
you’re halfway to turning your 
blog into a success 



22 , /ordPress Genius Guide 




WordPress Genius Guide 23 



Word Pres: 






Getting started 






The Settings 

MASTER THE SETTINGS AND GAIN EULL CONTROL OE YOUR WORDPRESS BLOG 




Once added, your site's 
title will appear at the top of 
the browser window, so 
make sure it's memorable 
and catchyl 




Set E-tnail 

When you setup WordPress, 
your email address is 
required for sending plugin 
and moderation updates to. 
You can change it by 
updating this field 




Timezone 

Ensure your blog's 
timezone city is set 
correctly to ensure that 
post schedulihg works. 
Some apps also rely oh 
this being setup 



Style Date 

How do you want the date to 
appear Oh your blog? 
Choose from one of the 
available optiohs or select a 
custom format 




Start Date 

If you plahoh usihg 
calehdar plugins, use tbe 
Week Starts On drop down 
to select the first day of 
your week 



CONFIGURING YOUR WORDPRESS website correctly is vital to getting 
your blog working effectively. Options for discussion, managing media, 
specifying a home page and managing permalinks and much more can 
be accessed via the Settings screens. Need to determine how comments 
are displayed, or how avatars appear? Want to specify how many blog entries 



should appear on a single page? All of these options, and more, can be managed in 
the Settings menus, which is split into six sections: General, Writing, Reading, 
Discussion, Media and Permalinks. If you are able to achieve mastery over the 
settings and their options, you will be halfway there in terms of turning your blog 
into a success. 




Name your blog 




01; Site title details 02: Specify the URL 03: Manage the timezone 

Your site must have a title and a tagline. Both are SpecifY if WordPress is installed in a subfolder on Setting the right timezone for your blog will help 

important, but the tagline is particularly vital for your domain in the WordPress Address (URL) field. with scheduling posts and managing plugins. You 

ensuring the most basic level of SEO. Site Address (URL) is the URL for readers to use. can configure a Date Format and a Time Format. 
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Writing Settings 

WANT TO UPDATE YOUR BLOG VIA EMAIL? CONEIGURE WRITING SETTINGS! 



THE WRITING SETTINGS page covers a range of 
options, from deciding how emoticons should 
appear to specifying update services. 

One of the most powerful options in the 
WordPress Settings menu is found here, the ability 
to post by email. While you will probably have 
access to a WordPress mobile app (available on 
almost all smartphones) there is a chance that you 
may have restricted access in some situations. In 
this scenario, you can use the 'Post via email' tool 



to specify a Mail Server and Port, a Login Name/ 
email address used solely for this purpose and a 
Password. Because any message sent to the email 
address will be published automatically, these 
details should remain secret. You can also specify 
a Default Mail Category for your emailed posts. 
Note that there is also a Default Post Category 
option (along with Default Post Format) for posts 
added in the usual manner. Remember to always 
click Save Changes. 



Top tip 



Using Press This can 
streamline your 
workflow considerably, 
allowing you to embed 
images or post or 
create drafts c 
the fly. 









Category 

Setting a default post 
category can save a lot of 
time when writing posts, 
creating drafts and using 
the Press This bookmarklet 





Email Post 

To post by email, ensure 
you have entered a mail 
server name, and also 
create a unique email 
address to send your 
posts to 



Password 

If you have trouble creating a 
password for posting by email, 
use one of those created at 
random by WordPress and 
displayed here 




Press This 

The Press This bookmarklet 
can be dragged to your 
browser's toolbar. Use it to 
clip media from any web 
page to include on your blog 





Ping Posts 

Add ping services to help 
publicise your blog. You can 
find a list of update services 
to include in this field on the 
WordPress.org website 






Emoticons and more 




01: Formatting emoticons 02: Press This bookmarklet 03: Ping Update Services 

If you're a blogger who likes to use emoticons, use Drag this bookmarklet to your browser favourites Get more views for your blog by adding a list of the 

the Formatting option to specify whether you bar. When you spot a post you want to link to, click most popular update services to ping. The more 

would like WordPress to show graphical smilies. Press This to copy the link into a draft post. you add, the more services will pick-up your posts. 
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Reading Settings 

MANAGE HOW YOUR BLOG DISPLAYS POSTS, AND WHERE THEY GAN BE EOUND 



IS YOUR BLOG a blog, or is it a website? There are 
many reasons for using WordPress as a content 
management system, and if this is the path you’ve 
chosen then heading to the Settings>Reading screen 
wili enable you to alter what the front page of your site 
displays. If you want to show the blog, then display 
Your latest posts. However, if you want a static page 
to be displayed, use 'A static page' to select the 
appropriate option from one of the drop-down 
menus, (Some WordPress themes require the static 



page option to be set in order to display a flexible 
home page.) 

Significantly, the Reading Settings also display the 
Follower Settings, one of the key ways to introduce 
your blog to readers who follow your blog or one of 
the posts on it. Here, ensure you add a professional, 
customised response rather than relying on the 
default option, and make sure your reader feels 
welcome. After all, you want them to come back again 
and again! 



Top tip 

By configuring the 
two email text boxes 
with some amusing 
promises about your 
blog, you can 
readers return 
regularly. 




ut your 
ensure i 
;urn J 



r 







Page display 




01: Blog page count 02: Feed management 03: Search Engine Visibility 

The blog page on your site is set to display ten Syndication feeds (such as RSS/Atom) display ten If you don’t want your site to be picked up by 

posts by default. Increasing this will provide more feeds, and this can also be increased. Choose search engines, the best way to do this is to select 

content for your readers. whether to display the full article or a summary. ‘Discourage search engines from indexing this site'. 
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Discussion Settings 

ENCOURAGE DISCUSSION AND BUILD COMMUNITY ON YOUR BLOG, WHILE MINIMISING SPAM 



CONFIGURING THE DISCUSSION settings correctly will enable you to make a 
definitive statement about what you expect from your readers, and what they 
should expect from your blog. 

Use the 'Allow people to post comments on new articles' option to accept 
comments in the first place (individual post settings will override this). Move onto 



the 'Comment author must fill out name and e-mail' and 'Users must be registered 
and logged in to comment' options to require your readers to take responsibility for 
their comments. Team these settings with the Akismet plugin and you can virtually 
guarantee your readers zero comment spam when they visit your blog. Show 
readers you have a spam-free blog and they'll join in with the discussion. 



Pingbacks 

Sending and receiving 
pingbacks with other blogs is 
an automated method of 
creating reciprocal links. These 
defaults can be overridden on 
Individual posts 






iSiPaigs 



Move On 

Keeping old articles live by adding new 
comments to them will affect caching 
on your site. Close comments on older 
articles to reduce this 



Use alerts 

You need to know when 
comments arrive on your 
blog, especially when a 
moderation action is 
required, so enable these 
email alerts 



Moderation 

To help with moderating 
comments, specify words, 
URLs, names, email 
addresses and even IPs to 
be held for moderation 




01: Using nested comments 

Make reading comments easy for readers by using 
nested comments, the method of indenting each 
reply to a single comment. 



02: Comment moderation emails 03: Moderation and Blacklist 



Use the 'Email me whenever' and the 'Before a 
comment appears' settings to have email alerts 
sent to you when comments require moderation. 



The Comment Moderation and Comment Blacklist 
fields can be used to filter out comments from 
spammers and troublesome users. 
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Media Settings 

SPECIFY DIMENSIONS FOR IMAGES ADDED TO YOUR BLOG FOR UNIFORM MEDIA RIGHNESS 



a 


O >« • ^ 


I 




Media Settings I 


Resize 



Pixels 

How wide and how high 
should your images be? 
These dimensions are 
measured in pixels and can 
be easily adjusted 







ihufnfenAil tiM 

upkMdinf fum < 



The default dimensions for thumbnails 
and featured images can be resized on 
your blog from this screen, along with 
any images you include in posts 



Cropping 

Rather than having your thumbnail images 
appear extremely small, use the cropping 
option to have WordPress crop them to show a 
segment of the image 






Uploading 

Specifying which directory 
images are uploaded to 
should occur during setup. 
To change, alter this file 
path. You can also specify a 
full URL path 



Saving 

Made changes? Remember 
to save them and then check 
how the images are sized on 
your main blog page, 
adjusting anything that 
doesn't seem right 



GETTING THE IMAGE sizes right on your blog is very important. One 

wrong dimension and your iayout couid struggie to contain the information 
you’re sharing! 

Hopefuily this won't happen, and certainly shouldn’t with WordPress' Media 
Settings, where image sizes can be specified to the pixel for thumbnails, medium 
and large images. Just input the sizes you want and click Save Changes. You can 
also decide whether to crop thumbnails or have them resized to the exact 
dimensions you selected. 



Be aware that some themes will override any dimensions you add here, so to 
make sure they’re being applied check the Theme Options page where appropriate. 

it is also possible to instruct WordPress to upload images to a specific file path, 
but in most cases you won't want to change this. 

^ Image sizes can be specified to the 
pixel for thumbnails ■ 



Fine-tune your images 




01: Specifying image dimensions 02: Check image sizes 03: Organise your images 

Setting a new dimension for your images is easy. You shouldn’t just leave it at that, however: open Ensure that the ‘Organize my uploads into month- 

Once the width and height have been added, save your blog’s front page and check that the image and year-based folders’ option remains ticked, 

changes. Fine-tune by using up and down arrows. sizes have been applied correctly. Disabling can result in problems later. 
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Permalink Settings 

YOUR BLOG WILL LIVE OR DIE BY YOUR PERMALINK CHOICE. CHOOSE WELL! 



PERMALINKS CAN BE a problem for many users. So 

many blogs have fallen by the wayside simply because 
the owners didn't understand the importance of using 
permalinks to build attractive URLs, addresses that 
search engines are likely to index favourably. 

Instead, these blogs were left to struggle with URLs 
of the format www.yourblog.co, uk/?p=123. It tells 
Google nothing, and it tells you nothing. 

WordPress' Permalink Settings provides you with the 
option to choose four easy-to-read permalink styles. 



each of which includes useful information. (Note 
that changing permalink style may cause problems 
with some plugins, which will need time to re-index 
your posts.) 

With a choice made, all you need to do Is click Save 
Changes and wait a couple of moments before 
checking your website. The original URL format will still 
work and any links to it will resolve (hence "permalinks") 
but it is now masked with something that is more 
user-friendly, and ideal for Google to index. 



Top tip 



If you run a busy blog 
with regular updates 
throughout the day, use 
the Day and name 
permalink. For less busy 
blogs, choose Post 
name. 





The choice 

There are so many 
permalink formats to 
choose from, making a 
choice should be based 
on how often your blog 
Is updated 



Categories 

You can also select a 
category-based structure 
for your permalinks, by 
specifying a Category base 
(such as "topics”) in the 
corresponding field 




Permalinks 

Select the permalink format 
you would like to create 
"friendly" URLs for search 
engines and readers to use to 
find content on your blog 



Other tags 

If these permalink settings 
aren’t to your liking, a number 
of alternatives are available, 
with a vast selection of these 
listed on WordPress.org 



Customised 

To use one of the custom 
permalink formats, select 
Custom Structure and enter 
it into the space provided, 
taking are to include 
necessary spaces 



Customise permalinks 



PH 



01 : Which permalink option? 02: Set Custom Structure 03: Category base permalinks 

Choosing the correct permalink option depends on You may also consider a custom structure for Tag- and category-based permalinks can also be 

your strategy for SEO and promotion. It can also be focusing on employing user- and search engine- established, but this only really works if your blog 

based on how regularly your blog is updated. friendly permalinks for your blog entry URLs. has a heavy reliance on categories and limited tags. 
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Using widgets in WordPress 

WIDGETS CAN ADD INTERACTIVITY TO A WORDPRESS SITE 



WIDGETS ARE NOT the most well-known 
feature of WordPress, but you will likely 
see them in action every time you visit a 
WordPress powered site. A selection of 
useful examples is built Into the platform by default and 
these can be customised In limited ways, but you can 
also use the text widget as a method of quickly adding 
your own code to the home page. Whether you want 



to show the latest posts or display a gallery of Images, 
carefully placed widgets can act as a gateway to what 
would otherwise be hidden areas of your site and you 
can also download specialist widgets on almost any 
topic. The main point to remember with widgets is that 
overuse can lead to an ugly interface so try to limit 
their use to only the ones that add worth to your site 
and which look consistent with your site. 



iLil Widgets can act as a 
gateway to what would 
be otherwise hidden 
areas of your site 





Available Widcra 



SMebar 



Sub Footer 2 



Customise 

The Editor can be used to 
customise the areas holding 
your widgets using code. You 
can build consistency 
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Plugins option 

Widgets are available from 
the Plugins option. It's not ftry 
obvious, but many are 
available to try 
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Rnd and edit widgets 




01: A compatible theme 02: Find new widgets 

You need to make sure your theme Widgets are stored in the plugins 
supports widgets before you start. Go area and can be found by searching 
to Appearance and then select the for ‘widgets'. Before selecting any 
Widgets option. The available areas widget, click the Details option and 
for widgets will be displayed then Screenshots to ensure it will fit 

alongside a list of widgets. your site design. 




03: Edits and previews 04: Use your code 

Go to Appearance / Customise to see The text widget included by default 
a preview of your main page. In the looks quite innocuous, but you can 
left-hand column you can now use embedding code. Javascript and 

customise each widget and see the HTML to add advanced functionality 
changes previewed immediately. It's to your sidebar without using a 
simple and very efficient. specialist widget. 
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Get to grips with plugins 

PLUGINS CAN MAKE ANY WORDPRESS SITE UNIQUE 



IT IS EASY to be all too consumed by web 
design and producing quality content 
when setting up a WordPress blog, but 
plugins should never be ignored because 
they are the jewel In the crown of the platform and 
can help to make any WordPress site unique, 

Intuitive and a generally better experience for the 
reader. Used wisely, they can add useful features, but you 



should be careful to not use too many as this can lead 
to slower performance and a bloated design which 
does little more than confuse. Each plugin is different 
and each will come with its own set of instructions so 
we will concentrate on giving advice on the best ways to 
use individual plugins and the system as a whole If you 
use them for just the features that you require to be 
essential, they will add a huge amount of capability to 



§§ Plugins are the 
jewel in the crown of 
the platform if 

your blog which will keep visitors coming back time and 
time again. 




Add new plugins 

There are literally thousands 
of useful plugins available by 
simply clicking this button 



Change settings 

The settings for each plugin. 
If available, will be located In 
the left sidebar 



Plugins Mtrnm 
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Suspicious plugin 

If you suspect a plugin Is 
causing performance 
issues, deactivate it to 
test the theory 
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Visit the site 

The plugin sites are great 
sources of added 
information and for 
sourcing developer help 



Edit plugins 

You can edit plugins by hand 
if you are versed in the art of 
PHP coding 
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Choose your plugins wisely 




01: Limit your plugins 

When you first click the Plugins 
option you will likely see two plugins 
already installed. You should activate, 
or install, Akismet as it deals with 
spam comments, but remember to 
not use too many plugins. 



02: Add new plugins 

Click ‘Add new' to see plugins that are 
available and then search for any 
relevant term. Before installing any 
plugin tap on the Details option to 
ensure it is compatible with your 
WordPress version. 



03: Plugin options 

When a new plugin has been 
installed, if there are settings 
included you will see them in the left 
sidebar at the bottom. The settings 
are separated from your main 
WordPress installation for stability. 



04: Edit the plugins 

Most plugins can be edited by hand 
and if you know how to code, simply 
click the Edit option for the plugin 
in the main list to be taken to the 
.php file for that plugin. You have 
complete control. 
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Manage 

Word Press 
Comments 

ONE OF THE MAIN REASONS FOR BLOGGING IS TO SPEAK 
TO PEOPLE, BUT WHEN THEY BEGIN TALKING BAGK 
YOU'LL NEED TO MAKE SURE THEIR VOIGES ARE HEARD 
ABOVE THE NOISE 



TUTORIAL 

OBJECTIVE 

Efficiently manage 
WordPress comments, 
block spam and 
make changes based on 
site policy 

TIME REQUIRED 

30 minutes 



i 

i 



Top tip 

Allowing the use of 
avatars in comments 
will allow for you to 
identify different users 
more easiiy. Which is 
great for being user 
friendly as well as 
adding a splash of 
colour to the page. 
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<top> 

• Every comment on your blog can be managed 
using the menu, enabling you to trash, edit, 
mark as spam and much more 

<ieft> 

• Comments detected as spam by Akismet 
are collected in a separate page where they 
can be reviewed and bulk deleted or restored 
if mislabelled 




WITH A POPULAR blog you should be 
attracting at least a couple of comments 
per post. It's great to engage with your 
■=■ readers, but sometimes they can prove 
problematic, leaving links to unsavoury sites, being 
aggressive to other readers or simply spamming. 

Fortunately, WordPress offers a collection of tools 
that you can use to deal with bad comments, such as 
marking them as spam (in conjunction with the Akismet 
plugin that installs with WordPress), yiewing the history 
of your commenters and tracing their IP address. You 
can even edit comments that are left on your blog. 

Once you have got to grips with these tools, you’ll be 
able to manage comments effortlessly, perhaps 
scheduling a time to login and check for any pending 
thoughts and problems that might arise from them. 
Keep your readers happyl 



01 



Quickly check comments 

You can start checking your comments by 



signing into the Dashboard and clicking on the 
Comments menu... but it's a bit slow, isn’t it? So stop it. 

Instead, whenever you’re signed into your WordPress 
site, use the WordPress Admin Bar that is striped across 
the top of your site’s posts and pages. 

The fourth icon from the left is a speech bubble. Click 
to jump straight to the comments page. 



•If 



Cult 

itannia 




Comments page dissected 

You’ve probably used the comments page 
before, but do you really know it? As well as the ability 
to switch between All. Pending, Approved, Spam and 
Trash views, you’ll find bulk actions and a filter to 
distinguish comments and pings from other blogs. 

The left column displays details about the 
commenters, their email and IP addresses. The middle 
column displays the comment and the date it was left. 
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Bulk editing comments 

While it is easy to approve or mark comments as spam 
individuaiiy, what do you do if you need to discard with several 
unwanted items of feedback from visitors? 

WordPress features a bulk comments management tool, just tick the 
box to the left of each comment you want to reclassify, then use the 
drop-down menu to select the appropriate action. 
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Editings 

comment 



Although you may 
reasonably consider your 
blog a bastion of free 
speech, there might be 
cause to alter a comment 
slightly, perhaps for legal 
reasons or to remove a 
link if you don't feel that it 
is relevant 

This is easily done by 
hovering over the 
comment with your 
mouse pointer and 
selecting one of the two 
editing options. Quick Edit 
or Edit With your changes 
made, click Update 
Comment to save. 
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Identifying commenters 

Who is commenting on your blog? 



More to the point who is spamming or trolling 
your readers? Use the information on the left, 
particularly the email address and IP address to 
view any data collected by WordPress about 
the commenter. 

If you consider a commenter to be trouble, 
you can use an IP blocking plugin like Ban User 
By IP to prevent them engaging with your blog in 
the future. 



Outsourcing comments 




01: Facebook comments 

Rather than leave your web server to 
handle comments, employ third party 
services. Readers who leave feedback 
through a Facebook comments plugin 
will lure friends with similar interests. 



OR comment history 

With any luck you'll collect a group of regular commenters as your 
blog grows, and you can check their activity over time by clicking on the IP 
address and viewing all comments sent from the same device. 

You can also view the background to an entry in the Comments screen by 
hovering the mouse over a comment and clicking History, which will show if 
the comment has been moderated. 





View post 
comments 



If your blog is particularly busy with many 
comments on various posts, you might 
prefer to moderate your readers' thoughts 
on a more focused basis. This is possible 
by clicking the post title on the right-hand 
side of the Comments screen. 

The edit post view will open, and you'll 
find the comments for that post 
somewhere beneath the text entry box, 
where they can be edited, reclassified as 
spam, etc. 








02: Plugin to Disqus 

Disqus is popular, used on newspaper 
websites and WordPress blogs alike. 
Like Facebook, it offers a single sign-in 
so readers don't have to login each 
time they visit your site. 



03:The Jetpack plugin 

To coax responses from your readers, 
activate the comments function in the 
Jetpack plugin, enabling readers to 
sign-in with existing Facebook, Twitter 
and WordPress.com accounts. 
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Posting 

WordPress 

content 

UNDERSTAND HOWTO OUlCKLY POST PROFESSIONALLY 
FORMATTED AND ATTRACTIVE CONTENT, AND HOWTO 
SCHEDULE YOUR POSTS IN A LOGICAL ORDER SO THAT YOUR 
BLOG IS REGULARLY UPDATED 



TUTORIAL 

OBJECTIVE 

Post new content to your 
WordPress blog 

TIME REQUIRED 

10 minutes 




WHEN CREATING A blog, no matter what 
platform you are using, the content Is by far 
the most Important aspect of what you are 
-=r building. It builds a readership initially, it will 
keep visitors coming back and it will help improve your 
clout with the all important search engines. Content 
should be formatted in a consistent manner and it 
should be obvious as to what the topic is, and 
WordPress Is well placed to help you create attractive 
online articles without the need to code every piece of 
formatting in each paragraph. You can still use 
advanced code when necessary, but we will highlight 
some general rules for content creation and also show 
you some of the more useful features available on the 
WordPress platform. If you remember that content is 
king, your blog will be much more popular than you 
ever expected. 




m The formatting bar 

Even if you like to code your posts by hand, 
take some time to familiarise yourself with the 
formatting bar. It is much guicker in normal use for 
formatting text, adding bullet points and especially 
for inserting media. If you wish to see and amend 
the underlying code, just click the Text option and 
continue working. 




Focus on content 

The WordPress dashboard can be a busy 
place to work in, but clicking the Distraction Free Writing 
icon top-right will remove all of the extra tools and let 
you work in a much cleaner environment. Your work will 
be saved as you continue and It could replace your 
standard writing software. 
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Insert Media 

Try to use the automated tools to add images to any post. 
You will be able to add a description for the image and also more 
information which is useful for search engine results. Media is often 
overlooked as a method of gaining more traffic so use the tools 
WordPress offers to increase your readership. 





Perfect 

previews 



You will see a preview 
option in the right-hand 
column when adding new 
posts and you should 
always use this before 
publishing any content. 
When selected it will show 
your content exactly how 
your readers will see it 
and will highlight any 
inconsistencies. Don't rely 
on just your knowledge 
and assume everything 
looks correct. 




Displaying code 

\J\J The use of <code> and </code> 
to surround text is useful for transforming 
code into a format that looks realistic. It 
will immediately make the reader 
understand what they are looking at and 
is particularly useful if you are 
demonstrating code within a much longer 
article that is filled with varied content. 



Edit the stylesheet 

To change the font for all of your posts, navigate to Editor and then 
look for the Stylesheet (style.css) file. When opened, you should see the 
Global font choices at the top and all you need to do is type over the current 
font and change the font weight, size etc. You can also insert your own 
preferences, but back up the contents of the file before making changes. 




07 



Understand writing 
styles 



Clicking the Toggle Toolbar option will 
bring up a selection of new formatting 
tools to use and the headings option 
which Is the most important. Appropriate 
use of headings will draw the readers into 
the content of your post and make it less 
likely that they will skim past it without 
fully engaging in your work. 
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Publish your blog post 




01: A public post 

By default all of your posts should be 
set for public viewing, but you should 
double check this by clicking the 
Visibility option in the publish panei on 
the right. 




02: In the future 

Click the ‘Publish immediately’ option 
and then select a time and date of your 
choosing. The publish icon will change 
to Schedule and when clicked the post 
will be saved. 



03: Published and 
scheduled 

See an overview of your content by 
clicking 'Posts’ in the left-hand sidebar. 
Scheduled items will be listed at the 
top with publishing date displayed. 
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Mastering 
the Media 
Library 

THE WORDPRESS MEDIA LIBRARY IS ESSENTIAL LOR MANAGING 
YOUR BLOG ASSETS, GHIEELY IMAGES AND VIDEOS. HERE WE 
EXAMINETHE LATEST VERSION AND HOWTO PEREORMTHE KEY 
AGTIONS, SUGH AS UPLOADING AND EDITING 



TUTORIAL 

OBJECTIVE 

Uploading, editing and 
allocating images or 
video via the WordPress 
Media Library 

TIME REQUIRED 

10 Minutes 




IN ADDITION TO the text you publish 
within your WordPress blog, you’ll have a 
wealth of media assets alongside. Whether 
■=■ it's images, video or sound clips, WordPress 
makes the process of managing these files via the 
Media Library Accessible via the latest version 4 
Dashboard sidebar, you will find all of the existing 
uploads itemised chronologically by default. As you 
add more this list can invariably grow fairly large and 
the Media Library is therefore essential for 
good WordPress housekeeping. Over the next few 
steps we’ll guide you through the more important 
features of the Media Library, along with deeper 
pointers for advanced use. With a focus on uploading, 
editing, attaching and detaching media, plus a 
glimpse at the Add Media facility, you should find 
everything required for a quick course in WordPress 
media management! 




m The Media Library 

The Media Library is found below the Posts 
option within the Dashboard sidebar. Hover over the 
option and a popup menu has direct links to the Library 
or Add New facilities. Selecting the Library provides 
access to the typical list view, itemising each file 
currently uploaded. You can also toggle the Gallery view 
to preview every file with larger thumbnails. 




Sidebar 

The Media Library 
is located below the 
Posts sectioh of the 
WordPress 
Dashboard sidebar 



Uploaded files 

Uploaded files are 
Ih chronological 
order by default, 
llstihg a thumbnail 
preview, filename 
and file type 



Options 

Hover over an asset 
in within your 
library and link 
options to Edit, 
Delete Permanently 
and View appear 



Add new 

The Add New button 
launches the Upload 
Media screen, which 
is where you can 
browse or upload 
new files 



Uploaded to 

'Uploaded to' 
Identifies the post 
the asset Is 
attached to. Author’ 
Identifies who 
uploaded the post 
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Uploading files 

Click the Add New button with either view 




selected and you will be presented with a dotted box. 
Here you can simply drag and drop multiple desired 
files into this area or click the Select Files button to 
browse. Each file should not exceed the maximum file 
size (SMB) and if you do experience problems, you may 
switch to the built-in browser upload instead. 
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Various file types 

Typically you will be uploading images and video. WordPress 
accepts JPG, JPEG, ,PNG and GIF, along with MP4/M4V, MOV, WMV, AVI, 
MPG, OGV, 3GP and 3G2, Besides audio WAV and MP3 formats, you 
can also upload PDF or Microsoft Office document types. These can 
be linked within your posts to provide a download link. 





Edit 

media 



Once files are uploaded, 
an Edit link appears below 
the upload box. You can 
also access the Edit 
options from the main 
Media Library and this 
where you assign 
information to the asset. 
The fields are the same 
for each type and will be 
applied by default to that 
file when added to a post. 
Name, Caption and 
Description can be set 
and you can also grab the 
direct download link. 



Edit MMjiA 
Marriage 
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Edit Image 

\J\J In addition, image assets may 
be edited very basically by clicking the 
Edit Image button. You should really 
process your images before upload but 
the options here are useful for 
performing rotations or flips and chiefly 
for applying crops. New dimensions can 
also be set to scale the image larger or 
smaller as desired, choosing to retain the 
original image within the thumbnail. 



Attaching media 

Media assets will reside in your library whether you allocate them to 
a post or not. To insert them you can use the Add Media button within the 
post editor, or use the Attach link within the Media Library to allocate. From 
here you can select an existing post from the list. This just associates the file. 
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Deleting media 

Media files within your Library 
can be deleted at any time. Hover over 
the file in the list view and click Delete 
Permanently, or use the same link within 
Edit Media. Click OK when prompted to 
confirm and the file will be removed from 
the Library and any associated post. 




Manage new blogs 




01: Posts>Add Media 

When adding new media directly into a 
new post, you’ll see a slightly different 
screen. The Insert Media dialog lets you 
pick library assets or drop onto the 
Upload Files tab. 




02: Create Gallery 

Here you can make multiple image 
selections by checking each image you 
want in your gallery. Clicking Create 
New Gallery lets you drag the images 
into a desired order before inserting. 
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03: Set Featured Image 

This is where you allocate the main 
image representing the post on the front 
of your blog. The principle remains the 
same, allowing asset selection from the 
library or drag and drop upload. 
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Getting hosted 
with WordPress 



CHOOSING THE RIGHT WORDPRESS HOST REQUIRES RESEARCH, PATIENCE, 
AND A GOOD UNDERSTANDING OE HOW THE PLATEORM WORKS 



THE BEST ADVICE we can offer you when choosing a new WordPress 
host is to make sure that you understand what is required to offer a 
reliable and speedy experience for you and your visitors. There are 
many technical areas that need to be researched to ensure a positive 
oniine experience over time and some of these are not obviousiy promoted by hosts. 
We will cover the most obvious advice and also some areas that are easily 
overlooked, and hopefully at the end you should have a good idea of what you will 



need to run your WordPress environment. Pricing is of course important, but even 
more so is the reputation of a host and the reviews of its customers. If you can find a 
host that offers fast and free support, and is able to give you some help along the 
way, you will be half way there. If they have a deep understanding of WordPress and 
the way it works, you should be assured of an experience that is fit for your site 
visitors and the way you want to run your blog. It's time to see what a good host 
should be capable of providing to a WordPress blogger. 
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Mane^ed WordPress hosting 
really works 

SOME WEB HOSTS offer managed WordPress hosting which takes 
away most of the hassie when initially installing the software. It is not 

Just designed to make things easier, however, because a hosting setup that 
is purposely designed for WordPress will ensure the fastest experience for 
your visitors and much less administration over time. Most packages will 
automatically install WordPress version updates and some will even ensure that 
all of your plugins are kept up to date all of the time. Even more importantly, 
they are built on infrastructure that is designed to work with the way WordPress 
stores data and this will ensure that you do not need to keep updating your 
package to account for database limits. Backups of your data are also usually 
included for peace of mind and throughout the experience, you should not just 
see faster performance for your visitors, but much saved time in administering 
the site on a daily basis. The only real downside is cost because managed 




<above> There are many upsides to managed hosting if you are prepared to pay 



sites will almost always be served on a singular basis and traffic limits may be 
restricted unless you are prepared to upgrade. You will need to decide if the 
managed route is right for you and most of your decision making will come 
down to how optimistic you are for the potential of making money from your 
venture in the future. Managed hosting will always be worth considering. 



Shared hosting is not always 
an ideal solution 

SHARED HOSTING IS a very common platform for hosts to sell WordPress 
solutions on and their main advantage is that these plans are often cheap in 
comparison to others. Boasts of unlimited bandwidth and disk space are all very 
well, but you should be aware that on a shared plan you are sharing servers with 
other users. This may cause intermittent performance from time to time and likely a 
generally slower service than you would experience from a dedicated server for 
your site. There is a place, however, for shared hosting and that is when starting out. 
If your potential host offers an easy upgrade path to a singular server for your site 
then you may wish to risk a shared plan while you ascertain the exact needs for 
your online presence. Shared hosting can work as a short-term solution and it will 
save you money while your are testing. 



GRID WEB HOSTING OVERVIEW 
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• Shared hosting can work for those 
who are starting out in the world of 
WordPress blogging, but is not ideal 
for long-term usage 




Always 
look for 
‘WordPress’ 



Top tip 

Try to understand 
your requirements and 
learn about how 
WordPress works before 
you begin researching 
hosts to make sure 
you get the right 
service. 



IT CAN FEEL romantic to decide to set up every single part of your hosting 
manually and there are of course many advantages to doing so, the main one 
being a forced gain of knowledge during the process. However, you can still 
maintain a lot of control over your WordPress installation if you choose a provider 
that will do a lot of the legwork for you. From the initial installation of the software 
to systems that are designed to work alongside WordPress. a host that offers 
'WordPress' hosting will likely be a better bet for the majority of bloggers. Database 
limits should be ample and because so many other WordPress installations are 
working on their servers, the entire space should be tried and tested for added 
reliability. It is basically a half-way house between standard hosting and Managed 



<above> 

• Hosts dedicated to WordPress 
tend to offer a more reliable 
experience 



WordPress setups and works well for the majority of users. 

Pricing is important, but even 
more so is the reputation of a host 
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• Pricing can be compiicated, 
but it reaiiy should not be 
that way 



THERE iS NO definite advice for what features shouid be inciuded when 
choosing a web host, but you shouid be aware of a trend in the industry 
of selling individuai features at separate prices. Web hosts wiil usually sell 
domains, but it is often cheaper to buy one from a dedicated supplier. Some also 
offer services such as domain privacy, Outlook support and other web related 
features that can soon add up to a much higher cost than you initially expected. 
When deciding what you need, make sure that the main features are available 
at reasonable prices and do not be afraid to use multiple organisations for your 
hosting and domains. Sometimes it can actually be advantageous to use more than 
one company for resilience and to ensure that not all of your online eggs are in one 
virtual basket. Pricing should always be obvious and very easy to understand. 

^ Be careful when checking all 
of the features a host offers ^ 



Understand the technical limits of Word Press hosting 



DEPENDING ON HOW long you expect to run a WordPress blog 
and what your ambitions are, you shouid be very careful when 
checking all of the features a host offers. MySQL databases are 
required for WordPress and checking the available limits is crucial 
to running and adding content to a blog over time. Some hosts limit 
MySQL database sizes to 100MB or even lower and even if these 
appear to be ample at the start, after a year or two you may hit the 
limit and need to transfer your database contents to another 
provider. The problem is that moving databases requires lots of 
technical knowledge so if you can be assured of longevity right 
from the start you will save yourself a lot of trouble in the future. 
Remember that many providers do not publicise the maximum limit 




for their databases so make sure you ask before signing up. <above> Be aware of every single specification you require before you sign up 



Other specifics to be aware of 

THE TREND FOR hosts to advertise disk space and bandwidth limits is useful as a 
guide, but there are other technical areas that you should familiarise yourself with 
before settling on your chosen web host. WordPress can work with a PHP Memory 
limit of 16GB, but you should be looking for 64MB to ensure that the site will run 
speedily over long periods. Also, as WordPress is based on MySQL and PHP, always 
opt for a Linux hosting package - other options will work, but the benefits from using 
Linux will be felt every time you use WordPress. You should also consider more 
general aspects of a host such as their available times to deal with problems and if 
they offer a telephone number for support queries. Read reviews on each host to 
gauge the general view of their services and don't always be swayed by price. Offers 
that look too good to be true usually are and, as we all know, you almost always get 
what you pay for. Take your time investigating all of the available WordPress hosting 
options because the wrong initial decision could cause months of pain, wasted time 
and much frustration. 




<above> Make sure you cover every single base when choosing a new web host 
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Four of the best hosts 

A DIVERSE COLLECTION OE WEB HOSTS AND SERVICES EOR HOME USERS, SMALL BUSINESSES, DESIGNERS AND DEVELOPERS 



bluehost 

www.bluehost.com 

$ 24 . 99 - $ 169.99 

bluehost is one of the oldest WordPress providers and offers very Impressive features, 
but the price range may be too high for some. Every plan includes dedicated backup 
storage so your data is always safe. The blogger package include 2GB of RAM, 30GB 
of storage and 30GB of backup storage. 





HostGator 

www.hostgator.com 

$ 7.46 - $ 56.21 

There are a variety of low-priced hosting package along with specialist 
WordPress hosting packages. The WP options come in three varieties. Starter, 
Business and Pro. All packages offer unlimited email accounts and storage space 
and allow for one site on the cheapest package going up to 20 . 




TSOHOST 

www.tsohost.com 

£ 1 . 25 -£ 19.99 

A UK-based provider with low-cost plans starting at £14.99 a year. The Lite 
package offers 500MB of web space and 3 MySQL databases. For larger sites 
there is the Standard package at £2.99 a month. For 10GB of web space try the 
Pro package. Alternatively, get 100GB of web space with the Ultimate package 




Media Temple 

www.mediatemple.net 

$ 20.00 - $ 240.00 

A popular web host with web professionals and agencies, it provides a range of 
specialist WordPress packages that covers all bases. It's Personal package offers 30Gb 
of web space. For $60 a month users can get 100GB of storage, 10 sites, 1 free domain 
and 2 Google Apps for work. If more is needed try the Agency package at $240 pm. 
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TUTORIAL 

OBJECTIVE 

Set up a host for your 
WordPress.org site 

TIME REQUIRED 

30-45 minutes 



Set up a host for 
yourWordPress 

YOU HAVEOPTIONS AVAILABLE TO YOU WHEN SETTING UP A NEW WORDPRESS HOST AND WE 
WILL EXPLAIN THE BASICS OE MANUAL AND AUTOMATIC INSTALLATIONS 



WHEN YOU SIGN up for a host, you should be 
given all of the tools you need to manage a 
WordPress installation. This will include database 
facilities and ftp data to upload large files, but some 
hosts will also offer automatic install scripts to make the initial 
WordPress setup as efficient as can be. You can choose to 
undertake every step of the process manually using the 
detailed instructions available from WordPress or you can use 
a script, but no matter what you use there are some areas to 
look out for We will cover the main points to ensure that your 



new site is secure and reliable and also offer some instructions 
on what you need to do and the tools you will require. One 
common mistake is to edit WordPress files using a word 
processor which you should never do. Make sure you use a 
standard text editor and that you do not have any 
capitalisation features enabled in your ftp software. This is due 
to certain features of processors that will create havoc with 
any coding in the files, for example, when coding you do not 
want to have smart quotes O in your text rather than straight 
quotes ("). 
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Dashboard 

Once installed, 
you should never 
need to visit any 
screen apart from 
the WordPress 
Dashboard 



Updates 

Updates should 
be installed as 
soon as they are 
available and can 
be done 
automatically 



Database 

The database 
setup is crucial 
to ensuring a 
smooth 
WordPress 
implementation 



Text editor 

Be prepared to have 
to manually amend 
WordPress files using 
a text editor 
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The control panel 

Once you have signed up for a host you 
should be given your account details, including a user 
name and password for the control panel. Enter these 
and make sure that you have all of the options you 
require available. You may also see WordPress options. 



Download WordPress 

Go to wordpress.org and download 
WordPress. Unzip it and then rename the wp-config- 
sample.php file to wp-config.php. Before you proceed 
make sure you have an ftp client installed and a text 
editor. Do not use a word processor to amend files. 






Create a database 

In the MySQL section of your host's control 
panel, create a new Wordpress database, making sure 
you have full admin permissions. You will need to make 
a note of the MySQL DB Name, MySQL User Name 
and MySQL Host Name plus the MySQL password. 




Dive into PHPMyAdmin 

You can access the PHPMyAdmin facility in 
your control panel from the MySQL screen and this 
will be required to let you add new users and to see 
the exact passwords for each user. This area Is open 
to error so read up before you make changes. 



Understand the structure 

WordPress offers a ‘Famous 5-Minute Install' 
resource at bit.ly/lkbYHGz which shows you the exact 
structure for a new WordPress installation. You can 
either follow the basic guide or use the detailed 
instructions to ensure the manual install works. 



Use a script 

If you have chosen a host that works with 
WordPress, you should see a one-click option to install 
the software. The process is quick and the databases 
you require should configure automatically. This option 
is recommended unless you have specific needs. 
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fVy Security is important 

t You will be asked during the automatic install 


1 


Remember the details 

Qnce the install has completed, you will be 


( 



process to choose a user name and password. You 
should always change the user name from Admin to 
something unique and make the password as long and 
complex as possible. Hackers like to attack WordPress. 



given the URL to manage your WordPress site with. 
Remember this and consider if you want WordPress to 
be Installed in a sub-directory or home. Choose a 
sub-directory if you will use your space for other tasks. 



( Check for updates 

When the WordPress dashboard is displayed, 
you should click the Updates option first. Make sure you 
are running the latest version to ensure security and 
even your plugins can be updated and maintained from 
the same screen. Always remember updates. 
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TUTORIAL 

OBJECTIVE 

Set up a domain name for 
your blog 

TIME REQUIRED 

15 minutes 



Manage your 
different domains 



IF YOU MANAGE AND SET UP YOUR DOMAINS CORRECTLY, THE REWARD WILL BE A SMOOTHER 
AND POTENTIALLY HIGHER AMOUNT OE TRAEEIC COMING TO YOUR BLOG 



SETTING UP AND managing a domain for your 
WordPress blog Is a part of a process that Is 
crucial to get right and will make a huge 
difference to the eventual popularity of your 
online presence. The name Is important, of course, and 
demands proper research, and the settings will also ensure 
that popular search engines and anyone else interested can 
see your work without seeing errors. We will take you through 



a setup process, but remember that these can vary depending 
on who your web host is, and we will also offer advice on areas 
that are often forgotten or completely ignored. If you give as 
much care and attention to your domain setup and 
management as you do to the design of your site, this will act 
as the perfect springboard to create a group of followers who 
can find and follow you without restriction. Take your time, 
understand the details and it will work. 




Home directory 

Point your domain to 
your home directory or 
the /wordpress folder 



Provider 

Check your domain 
provider privacy 
options or those 
available from ICANN 



Subdomains 

Subdomaihs help to 
break up a big site 
and to offer easier 
visitor navigation 



DNS 

The way DNS works 
should be understood 
to ensure domains 
work properly 



Domain Settings 
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The domain name 

Choosing a name for your blog is hugely 
important so be prepared to take some time to find 
one that works well. Expect to see most names already 
taken, but perseyere and you will be rewarded. All 
domain providers offer simple domain search tools. 



Domain management 

Once you have purchased a domain, your 
provider will offer an interface where you can manage 
how your domain works with your site. Expect to see 
Email, Forwards and DNS options which are required to 
ensure your domain works in search engines etc. 



Web host details 

Your web host should provide all of the 
Information you require, but the least you will need is a 
target host address and a forwarding address. With 
luck, they will provide a step-by-step guide to linking 
your domain with all the relevant information included. 
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f\/. Create a CNAME 


Forwarding your domain j 


In the DNS area of your domain provider's 


Once the CNAME has been created, you will ' 


control panel you will need to create a new CNAME 


need to forward your domain which will initially be set c 


and enter it as instructed by your web host. You will 


to go to your domain provider. In the main domain t 


also need to have an '@' record listed with a default IP 


control panel look for the Eorward option and enter t 


address, but the specifics will come from your host. 


your new domain name Into the field. t 
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fyy Create a subdomain 


AO Domain privacy f 


M Under your domain name in the main control Remember that your personal details will be \ 



panel you should see an option to create a subdomain. 
These can be used for major parts of your website and 
will be placed 'before' your main domain name. Eollow 
the Instructions to add it and wait for activation. 



added to your domain registration (with good reason). 
Most domain providers, however, will offer a privacy 
package which you should investigate if you are 
concerned about publishing your details online. 




Link the host 

To complete the setup, go to your web host's 




( Understand your rights 

When you purchase and run a domain you 
should make yourself fully aware of your rights and 
responsibilities. Go to www.icann.org to read about 
privacy services and understand every technical term to 
ensure you are using your domain correctly. 
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<above> 

• The Dashboard includes a dedicated 
section where users can be added, 
managed and deleted as required. You'll 
find it within the Users tab 

<lefl> 

• With the right permissions your invited 
users can create, upload and edit their 
own posts. You can retain full control 
over what content is published 




TUTORIAL 

OBJECTIVE 

Learn how to set up 
new users with suitable 
permissions to work on 
your blog. 

TIME REQUIRED 

5 minutes 



Control your 
user profiles 

WORDPRESS CAN CATER EOR LARGER PROJECTS REQUIRING MULTIPLE USERS TO GREATE AND 
UPLOAD GONTENT. AS AN ADMINISTRATOR YOU GAN SET UP VARYING LEVELS OE AGGESS 



IT’S NOT UNUSUAL to find that some WordPress 
based sites are made possible due to the 
contributions of multiple people (as opposed to 
being the work of one person). This is made 
possible thanks to the support of multiple users that is built 
into the WordPress Dashboard. As an owner of a WordPress 
blog you can invite other people to your site as a user. With 
multiple people being involved on a project you will need to 
control the level of access available to each individual. To help 



with this WordPress also includes a hierarchy of roles that can 
be assigned out as required. These range from the basic role 
of a Follower who can read and comment on posts. At the 
other end of the spectrum is the Administrator, for whom 
nothing is off limits. Then there is the life of the in-between, 
you have your Contributors who edit posts and delete them 
but cannot publish them. An Author can publish posts but 
cannot customise the blog the way Administrators and Super 
Admins cani 




46 WordPress Genius Guide 






Word Press 
Genius Guide m 




Adding a user 

You can invite new users to your blog via the 
Users section of the Wordpress dashboard. Simply 
enter a Wordpress username or an email address. Up 
to ten invites can be sent at once. Use the Role box to 
decide which role will be available to your invitees. 



Invite accepted 

Your invited recipients will receive an email 
requesting them to accept the invite. However, they will 
need to set up an account (they will be walked through 
the process). Once this is done they will be able to 
access your blog as per the permissions you set up. 



Your user list 

Back on your Dashboard you are able to view 
your blog's users via the Users tab. If you have multiple 
users you can select from the role types above main 
window to filter out a particular group. Roles can be 
adjusted and unwanted entries can be deleted. 







Managing users 

Making changes to users and their 
permissions is simple. Select the check box next to a 
user and select a role from the Change Role To menu. 
Click on the Change button to apply the selected role. 
This process is also used to delete users. 




Content control 

Granting users with basic Author priyileges is 
handy for when you want to keep control over what 
content is published on your blog. Any content created 
by an Author is sayed as a draft. As the Administrator 
you have control over whether it is published online. 




Your other blogs 

If you have been invited to contribute 
content to another blog you can find it within the My 
Blogs section of the WordPress dashboard. This will list 
sites hosted on Wordpress.com for which you are a 
Contributor, Author, Editor or Administrator. 




Role flexibility 

The roles available do come with limitations. 
For example, a Contributor can delete their own posts 
which may not be ideal for an Administrator. There are 
plugins, such as the User Role Editor, that allow you to 
adjust the finer details of permissions for each role. 






Types of User Roles 




01: Contributors 

Contributors can create and edit their 
own posts but cannot publish them. 
This is done by the Administrator. 

Once published the Contributor cannot 
edit it further. 




02: Authors 

Authors can create, edit, publish and 
delete only their own posts. They can 
also upload images and files. They 



cannot modify other users posts nor 
can they edit the pages. 




03: Editor 

The Editor can create, publish, edit 
and delete any post, as well as 
moderate comments, manage 
categories, links and tags. It is a step 
below The Administrator. 
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TUTORIAL 

OBJECTIVE 

Learn how to create back 
up files for restoring your 
WordPress database 

TIME REQUIRED 

5 minutes 



Back up your 
WordPress blog 

PREPARE EOR THE WORST BY CREATING A BACKUP OE EVERYTHING STORED IN YOUR WORDPRESS 
INSTALLATION. YOUR BACKUPS CAN THEN BE USED TO RESTORE LOST OR CORRUPTED INSTALLS 



TAKE A MOMENT to think about everything 
on your blog. Every post, every shared link, 
every image that you have ever put on your 
site since starting it. If your installation was 
somehow corrupted would you be comfortable with losing 
all of it? This is why backing up your site is a recommended 
task. The question of how regularly is largely down to 
your own preference. If you post often, then more frequent 
backups may be required. Heavier users are known to 
keeps backups on a local drive plus an external drive. It really 



is a question of how much you are prepared to lose if the 
worst happened. 

The process of performing a backup can vary from 
one setup to the next. There is also a difference depending 
on whether your blog is hosted by WordPress or by 
yourself. WordPress hosted blogs have the luxury of 
having WordPress themselves handling the backups. 
Self-hosted users should find that their provider likely provides 
a backup solution. Check with them to find out what services 
they can offer. 




phpMyAdmIn 
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Databases 

The left hand side 
panel lists the 
databases within 
your installation. 
Click on an entry 
to select it 



3 '" 



***' kmyii 
kn«00 

k«w06 udi 4.1 

'«• h«iu 06 ^ 

IbhOB uU 8 Cl 

WmOO hUB VI 



Help 

phpMyAdmin can be a 
little daunting for 
newcomers. The fourth 
icon along (the question 
mark) contains helpful 
documentation to assist 



Current database 

The larger right hand side 
section will display whatever 
database has been selected 
from the list on the left hand 
side. You can select individual 
entries from here if required 
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Tools 

The main tools and 
functions (including 
the Export function) 
can be found along 
the top of the right 
hand section 
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WordPress-based backup 

If your blog is hosted on WordPress (ie has a 
wordpress.com uri) you can use the Export tool to 
saye an XML file. This can save posts, pages and 
comments but not media such as images. Use the 
import function to restore your saved data. 




Self-hosted backup 

Depending on which hosting service you 
have chosen, you may have a database backup service 
available to you. Look for a MySQL option. In here you 
may find a back-up option for the database that 
contains your WordPress installation. 




Self-hosted full backup 

Your hosting company may also provide a 
full back-up solution that encapsulates all of the files 
stored on the server itself This may take time to save 
but would include everything that makes your website 
what it is. 







The Automated Solution 

There are also plugins that can simplify the 
back-up process for you. These can be useful for less 
experienced users as it bypasses the need for the 
trickier aspects such as MySQL and PHPMyAdmin. 
These tools can also be used to automate the process. 



Introducing BackWPup 

A well-regarded free plugin Is BackWPup. It 
provides an impressive set of tools that can back up 
your files to services such as Dropbox. It works by 
creating jobs where you control what is backed up and 
when. Install the plugin and select Create a Job. 



Creating a job 

In the job dialogue screen you can select the 
data that is to be backed up. Tabs across the top of the 
screen allow you to select where on your server your 
backups are kept If you have multiple plugins installed 
it can also back those up to save time when restoring. 










Backup with phpMyAdmin 

\J § The common tool phpMyAdmin can be 
used to back up your WordPress database. To get 
started, click on Databases in your phpMyAdmin 
panel. This step may not apply depending on your 
version of phpMyAdmin. 
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phpMyAdmin Export 

If you have more than one Database, 
select the one that applies to your installation. The 
Structures view tab will display your default tables. 
Use the export option to determine the data you wish 
to backup. 



Copy your files 

Using an FTP client you can also log in to the 
server side of your WordPress installation. You can then 
browse to the WordPress folders and copy/download 
them to your local drive. You can also zip or compress 
them once downloaded to further save on space. 
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Secure 

your 

Word Press 
site from 
hackers 

IN THIS TUTORIAL YOU'LL LEARN SOME ESSENTIAL 
HANDS-ON TECHNIOUES AND RESOURCES WHICH CAN 
HELP TO HARDEN YOUR WORDPRESS SITE AGAINST 
MULTIPLE THREATS 



TUTORIAL 

OBJECTIVE 

Secure your WordPress 
blog from the hackers with 
a few simple steps 

TIME REQUIRED 

30 minutes 




IT IS ESTIMATED that WordPress is 
currently used to power over 60 
million websites worldwide. Around 25 per 
■=■ cent of new sites also choose the free CMS 
as their foundation. WordPress has become 
exceptionaiiy popuiar with users and. as a result, 
exceptionally popular with the army of hackers and 
spammers lurking out there who would like nothing 
better than to exploit your website for a variety of 
nefarious purposes. 

WordPress is a solid and secure platform. But, like 
any web-based system, it requires constant upkeep 
and attention to stay one step ahead of the ever- 
evolving security threats. The platform is updated 
often and goes to great lengths to address new 
security issues with each subsequent release. However, 
there are several techniques and resources you can 
implement to ensure that your website remains as 
fortified as possible. 

Some of these tips are very simple things to 
employ that will make a difference to the ongoing 
security of your site, and indeed your PC or laptop and 
general online presence. Some require a little more 
know-how but once complete will ensure that you're 
safely protected. 



m Change your login 

still using the original Admin username? This is 
the first thing bots and exploits will look for. so change it. 
Log in with that username and create a new Administrator- 
level account with a more distinctive username. Then log 
out and log back in again using the new account so you 
can delete the original one. 




Creative passwords 

Nobody likes having to remember 20 different 
passwords, but it’s vital that your account password is as 
unique and character-rich, as possible. Use uppercase and 
lowercase letters, numbers and punctuation characters. If it 
resembles somebody swearing in a comic book (B*%1£#S!) 
you’re on the right track. 




Keep it updated 

One of the most common causes of 
vulnerabilities for WordPress sites is continuous use of 
outdated versions. It is vital that you keep your installation 
up to date. WordPress will notify you in the Dashboard 
when a new version has been released. Follow the prompts 
and update. It takes a few minutes and could save you a few 
hours In the long run. 




r\/. Avoid free themes 

There are countless websites out there that offer 
free, pre-built themes for your WordPress site. Beware. 

Most of these themes come packaged with a few invisible 
surprises under the hood. It's much better to stick to 
trusted sources through the WordPress.org site, build your 
own theme using a free framework, or buy one at 
reputable sites such as Theme Forest. 




OC Plugin awareness 

\J Plugins can be vital additions to your site, giving 
you great functionality beyond the basics. However, some 
plugins can present an open door to hackers. Make sure 
you get your plugins only through the WordPress 
extension, and check the reviews for any warnings. And, like 
the platform, be sure to keep them updated. 
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• As with all online accounts, your password is your first line of defence. It’s easy to fall into bad habits, using the same password for multiple accounts and utilising words 
and phrases that are easily guessed. Make the effort to keep it complex, keep it impersonal and, as much as possible, keep it changing 



Keep only what you need 

Do you have a bunch of plugins on your 
site that you dont use? Even a deactivated piugin can be 
a threat Remove as many inactive piugins, themes and files 
as you can, including the readme file in the root 
folder. Simple rule the fewer the scripts, the fewer 
the vulnerabilities. 



fyj Back it up 

\J # The importance of keeping your site backed up 
at regular intervals cannot be stressed enough. Not all 
attacks and hacks will cause you to lose it but you dont 
want to be the one who got caught out And sometimes, a 



clean reinstall of the site and content is the only way to be 
sure you are rid of any malware. 




08 



Keep your PC clean 

It's not just your WordPress website that you 
need to keep an eagle eye on. It is essential that you make 
sure you have a good antivirus running on your PC or 
laptop, too. Ensure that this is reputable and also kept up to 
date. You dont want to end up being the one that infected 
your own website simply because you placed a few 
corrupted files therel This should be a matter of course 
even if you dont own a website and can save you a lot of 
time and money in just a few clicks. 



^v^Malwarer 
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rjQ SFTPnotFTP 

\J All connections to your server for file updates 

should be done through SFTR rather than just FTP, 
assuming your host provider allows it If they don't consider 
moving to a host that does. The extra encryption protocol is 
a valuable safeguard against your login details being 
intercepted by bad boys and girls. 




1 0 conf ig file 

I Advanced security can be achieved by adding an 
.htaccess file in your site's root If you dont already have 
one, open a text file and rename it .htaccess. Place it Into 
your site's root folder with the code listed below. The code 
listed above # BEGIN WordPress prevents your database 
login details from being accessed in the browser in the 
event of a PFIP failure. 



001 # don’t allow wp-config.php to load 

002 <Files wp-config.php> 

003 order allow, deny 

004 deny from all 

005 </Files> 

006 # BEGIN WordPress 

007 <IfModule mod_rewrite.c> 

008 RewriteEngine On 

009 RewriteBase / 

010 RewriteRule ''index\.php$ - [L] 

011 RewriteCond %{REQUEST_FILENAME} !-f 

012 RewriteCond %{REQUEST_FILENAME} !-d 

013 RewriteRule . /index. php [L] 

014 </IfModule> 

015 # END WordPress 



I'orhidticn 




^ ^ Change WordPress prefix 

I I This is a step for fresh installs only (see the box 
above for existing sites). By removing the default 'wp' prefix 
for all database entries, you make it much harder for attacks 
to find access. Simply open wp-config.php in the root, scroll 
down to find the table prefix and change the wp to 
something else, such as movle_. 



001 $table_prefix = ‘wp_’; 

002 To 

003 $table_prefix = ‘movie_’; 




We covered changing the wp_ prefix for database tables on a fresh install in Step 11, The method for existing 
sites is a iittie more involved. You will need access to your database through PFIPMyAdmin, 

Perform a full backup of your database and keep it safe somewhere. Then take two exports of your database in 
text file format. Keep one as an original and open the other in a text editor. Replace all instances of wp_ with your 
new prefix. Go to your site admin area and deactivate all your plug-ins. Then drop your existing database and 
import your new, edited, text file. Edit the wp_config.php as in Step 11, then reactivate your plug-ins and check 
functionality. Lastly, got to Settings> Permalinks and refresh them by clicking Save Changes. 




12 



Prevent directory browsing 

To prevent anyone from accessing files in your 



WordPress directory by typing the directory path into the 
browser, place the code below into the .htaccess file, above 
# BEGIN WordPress. Placing a blank indexhtml file into 
every directory will have the same effect Fiowever, this is 
quicker and simpler. 



001 # prevent directory browsing 

002 Options -Indexes 



Top tip 



If you don’t want to undertake 
these .htaccess changes 
yourself, then Bulletproof 
Security is an excellent, free 
plug-in that does all the 
work for you. Highly 
recommended. 



001 # protect the htaccess file, 

002 <files ,htaccess> 

003 order allow, deny 

004 deny from all 

005 </files> 



IP address restrictions 

I "t If you and your contributors have static IP 
addresses, you can use the .htaccess file to restrict admin 
access to just those IPs. This technique offers a great 
security option, with obvious restrictions to accessing your 
own site should you suddenly find yourself at an 
unauthorised IPaddress. Just pop the code into the 
.htaccess file, filling in the IPs. 



Protect the .htaccess file 

I It may seem odd to place code within the . 

htaccess file that in essence, protects itself but with a great 
deal of your security nested here, why not play it safe? Any 
access to this file could mean access to the fortifications you 
have worked so hard to put up. Let's lock every door. 



001 AuthUserFile /dev/null 

002 AuthGroupFile /dev/null 

003 AuthName “Access Control” 

004 AuthType Basic 

005 order deny, allow 

006 deny from all 
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007 # authorised IP address 

008 allow from ??.???.???.??? 

009 # authorized IP address 

010 allow from ??.???.???.??? 



^ C Limit login attempts 

I Restricting the amount of login attempts that can 

be made by any IP gives you an added layer of security 
against 'brute force' attacks. Install the Limit Login Attempts 
plug-in through the plug-in search facility. This gives you a 
customisable series of features and notifies you when an IP 
lockout has been enforced. 




Disable HTTP Trace 

I Cross Site Tracing (XST) and Cross Site Scripting 

(XSS) are common attack methods. They work by using a 
server's default trace HTTP TRACE function to steal cookie 
and server information through header requests. You can 
guard against these attacks by turning off the functionality. 
Just place the above code in your .htaccess file, above 
# BEGIN WordPress. 



001 RewriteEngine On 

002 RewriteCond %{REQUEST_METHOD} "TRACE 

003 RewriteRule - [F] 
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Protect against SQL 
injections 



SQL injections are one of the more common forms of 
attack on WordPress sites. Most web hosts take every 
precaution to protect against these exploits, but you can 
add your own check by inserting this code into the . 
htaccess file. Place it just underneath RewriteBase L below 
# BEGIN WordPress 



001 # return 403 Forbidden when someone puts 
script tags or GLOBALS or _REQUEST stuff in 

the URL 

002 # 

003 RewriteCond %{QUERY_STRING} 

(\< I %3C) . *script . *(\> I %3E) [NC , OR] 

004 RewriteCond %{QUERY_STRING} GLOBALS(=|\ 
[|\%[0- 9A-Z]{0,2}) [OR] 

005 RewriteCond %{QUERY_STRING} _REQUEST(=|\ 
[|\%[0- 9A-Z]{0,2}) 

006 RewriteRule "(.*)$ index. php [F,L] 






Code library 

The HTACCESS file in fuil 

Although there are some security measures that can be implemented in the 
•htaccess file at a cost to site functionality, they have been avoided here 



The .htaccess file is a vitai 
and versatiie resource for 
adding extra layers of 
security to your site. Use it 



This is a comprehensive 
list of .htaccess tricks, but 
further research will 
uncover some more 
advanced ideas 



If you get 500 Internal 
Server errors when trying 
to load the site, the 
.htaccess file is always worth 
exploring first 



Remember that 
WordPress is able to edit 
any code between the 
BEGIN and END 
WordPress tags 



001 # don’t allow wp-config.php to load 

002 <Files wp-config.php> 

003 order allow, deny 

004 deny from all 

005 </Files> 

006 # prevent directory browsing 

007 Options -Indexes 

008 # protect the htaccess file 

009 <files .htaccess> 

010 order allow, deny 

011 deny from all 

012 </files> 

013 AuthUserFile /dev/null 

014 AuthGroupFile /dev/null 

015 AuthName “Access Control” 

016 AuthType Basic 

017 order deny, allow 

018 deny from all 

019 # authorised IP address 

020 allow from ??.???.???.??? 

021 # authorized IP address 

022 allow from ??.???.???.??? 

023 RewriteEngine On 

024 RewriteCond %{REQUEST_METHOD} "TRACE 

025 RewriteRule .* - [F]# BEGIN WordPress 

026 <IfModule mod_rewrite.c> 

027 RewriteEngine On 

028 RewriteBase / 

029 # return 403 Forbidden when someone puts script tags or 
GLOBALS or _REQUEST stuff in the URL 

030 # 

031 RewriteCond %{QUERY_STRING} (\<|%3C) ,*script.*(\>|%3E) 
[NC,OR] 

032 RewriteCond %{QUERY_STRING} GLOBALS(= | \[ | \%[0-9A-Z]{0, 2}) 
[OR] 

033 RewriteCond %{QUERY_STRING} _REQUEST(=|\[|\%[0-9A-Z]{0,2}) 

034 RewriteRule "(.*)$ index. php [F,L] 

035 RewriteRule "index\.php$ - [L] 

036 RewriteCond %{REQUEST_FILENAME} !-f 

037 RewriteCond %{REQUEST_FILENAME} !-d 

038 RewriteRule . /index. php [L] 

039 </IfModule> 

040 # END WordPress 



i i It is vital that you keep your installation 
up to date. WordPress will notify you in the 
Dashboard when a new version has been 
released. Follow the prompts and update 
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[ Add personality to your blog 




56 The 20 best WordPress 
themes 

Make your website your own with a 
beautiful WordPress theme 

66 Create your own theme 

start from scratch and create your own 
theme framework 

74 Build a responsive 
WordPress theme 

Take the next step and make sure your 
website is responsive 

78 Customise a WP theme 

Make a standard WordPress them your 
own with the customisation tools 

82 Convert a static site with 
a child theme 

Convert an static website so it is 
compatible with WordPress 

86 Create a mobile-friendly 
site 

Take your WordPress site into the 
modern age by making it adaptable 

90 Transform HTML to WP 

Take your HTML site and make it 
WordPress compatible 



€€ One of the 
most powerful 
things with 
WordPress is its 
versatility when it 
comes to themes f 
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THEMES AND WORDPRESS GO 
HAND-IN-HAND. THE SCIENCE 
BEHIND CHOOSING THE RIGHT 
THEME FOR THE RIGHT JOB IS 
EXPLAINED HERE... 
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Pangaea 



Source: bit.ly/lpllDIU 
Price: $17 

Best used for: Multi-purpose 




THE PANGAEA THEME is built by bradweb and is a fullscreen, 
contemporary, responsive multi-purpose site. The fullscreen nature 
of the theme makes it ideal for any site that wants to make an instant 
impact with some stunning photography or imagery. The design has 
a spacious and minimalist aesthetic that works across desktop, tablet 
and smartphone. 

If the fullscreen slider doesn’t work for what you want then there are a 
host of alternative home page designs. In fact there are eight designs in 
total. These come under the titles of standard, video. Ken Burns, slider, 
one page, portfolio, freelance and corporate, hence the multi-purpose 
nature of the theme. 

Layouts are critical to the appearance of a website and the option to 
choose a layout that works well for your content is important. Again, the 
theme excels with an impressive selection of layouts to choose from. 
There are 2. 3 and 4 column layouts in various guises: grid, gapless and 
fullscreen. The alternative, and currently popular option, is single 
portfolio page, again in different guises. 

In addition to the home page style, the Pangaea theme provides a 
host of pages eg About Us, that can be added at will, and work with the 
selected style. The fluid nature of this theme means that there are 
hundreds of options for creating a contemporary and unique site design. 



Hemlock 

Source: bit.ly/lqOoZIz 
Price: $39 

Best used for: Personal blog 




HEMLOCK IS A classic-style blog with a touch of style and class that makes it clean 
and contemporary. Rarely has a standard blog theme looked this good. It is refined, 
sleek and doesn't have a mass of annoying additions to distract users. The standard 
blog style uses wide images, classy serif fonts and a simple colour combination that 
adds that little bit of elegance. Individual posts retain the same style, but include 
neatly styled pullquotes. subtle social media buttons and biographies. 

There is the option to change from the classic layout, if you really need to, and 
adopt the classic WordPress sidebar. This gives the option to include more content on 
the home page without spoiling the style. For more flexibility there is the option for 
different style posts such as video, music and gallery. 



Mesh 

Source: themezilla.com/themes/mesh/ 

Price: $59 

Best used for: Personal 

FOR THOSE LOOKING to display their portfolio in a clean and 
contemporary style the Mesh theme is a great starting point. The theme 
adopts a simple left-sided navigation system while the main presence of the 
sites is dedicated to an image-based grid. 

Mesh is fully responsive and has a lightweight back-end meaning that the 
theme is quick and nimble. The image grid is conveniently filterable so 
visitors can instantly decide which elements they wish to view. 

Mesh has a number of customisable elements which gives the option to 
take the theme to a new level. It includes a number of custom-built widgets 
to add Twitter, Flickn video and advertising. There Is also a collection of 
custom pre-built page elements to ensure that you get the layout you want. 
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Gridify 



Source: www.ceeceee.com/gridify 
Price: $44 

Best used for: Portfolio/Photography 




GRIDS ARE POPULAR. They lay out content In a neat and easy to 
digest format for the user and they neatly slot Into the responsive 
style. Plus, with the right image seiection they iook visuaiiy appeaiing, 
modern and artistic. Everyone's a winner. 

As its name suggests, Gridify stays true to the popular grid-based 
theme, which is very much image-led and visual. The theme uses a full 
width Image header to introduce the subject matter, while neatly 
arranging the rest of the imagery into five columns. Each and every 
image had its very own rollover effect which introduces the title of the 
associated post. 

To break up the barrage of imagery blocks of text can replace an 
image. This can come in the form of a standard post, a comment and 
audio or video. Be careful with what you choose, as too much will spoil 
the aesthetic of the site design. 

Individual posts are simple and clean, but still very much in keeping 
with the theme's stance. An image heads the centred post window 
with the text running underneath. Nothing too clever, but it works 
perfectly for the theme. Sitting to the side is an off canvas menu that 
only makes an appearance when called into action. 




Each and every image had 
its very own rollover effect 
which introduces the title of 
the associated post 



JRNY 



Source: jrny.wpengine.com 
Price : $43 

Best used for: Photo blog 



GORGEOUS. BOLD. VISUAL. 



SOME THEMES ARE just gorgeous to look at and JRNY is one of 
those themes. It uses beautiful fullscreen photography combined 
with contemporary fonts to create an experience definitely worth 
looking at. While the image grabs a user's attention the theme is 
effectively very simple. Each image is accompanied by a title and 
other typical post text. A rollover effect is used which brings the text 
into play. Scrolling down the page reveals more fullscreen images. 

Delving into the individual post design reveals more of the same 
with the featured images topping the page and well thought out 
typography adding to the ambience. To keep the style consistent 
throughout the theme, images are not constricted to the 
boundaries of the text but are let free to fill the full width of the 
page. Sitting neatly at the bottom of individual posts Is the popular 
related post option. But, this is a single option, once again taking on 
the full width image persona. 

To keep in fitting with the fullscreen and full width imagery an off 
canvas menu is used. This slides into view when called, pushing the 
content aside and disappearing when no longer needed. 

Customising the theme is quick and easy. There are four grid 
layouts to call into action, a bespoke Theme Customizer and the 
option to add a Load More facility to keep the posts manageable. 
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Knoxville 



Source: www.gt3themes.com/wordpress-themes/knoxville 
Price: $44 

Best used for: Storytelling 





EVERY WEBSITE TELLS A STORY, it just depends what type of story 
it is selling. The Knoxville theme looks to the personal and allows 
users to tell the story of their life. Relive those great moments, retell 
glorious tales and reveal your inner most feelings to the world. 

Knoxville is a personal blog theme that leans heavily on visual 
impact to tell a story. The background is kept to a minimal white to 
give more impact to the Images that will wow visitors. The colour 
palette for the theme is kept to a minimum with shades of black and 
yellow adding a splash of colour. Sitting alongside the minimal colour 
palette is a complimentary sans serif font In the form of Inconsolata. 
This is used across the whole blog is varying sizes and a couple of 
weights to bring the design together. 

There are five different layouts on offer, all of which adopt a clean 
and modern style, with the option to deviate from the default colour 
scheme and typography choices thanks to the Live Customizer. There 
is also the almost obligatory slider hogging the major headspace of 
the home page. In addition there are different post formats available 
and in keeping with its modern theme Knoxville is responsive and 
retina-ready. 



The background is kept to 
a minimal white to give more 
impact to the images that will 
wow visitors 



Mont 



Source: bit.ly/IKUTFdc 
Price: $42 

Best used for: Magazine/blog 




THE MONT THEME adopts the magazine style but adds 
a modern twist to make it a comprehensive and content 
heavy option. For those who are looking to create a 
magazine-based site then Mont is the perfect answer, but it 
Is no one-trick pony. It has a number of layout options that 
Instantly offer a different style to present any content. For 
example, there is the magazine all module option which 
embraces all the elements that the theme has to offer. 

Users get a pride of place image slider to present content, a 
news ticker, a host of category based options and reviews. 
This can be manipulated and rearranged to fine-tune the 
layout. The alternative is to select one of the other layout 
options. These provide the option to put sidebars left, 
centre or right along with the content. If these layouts don't 
exactly match your preferences they can be tweaked to 
suit. Whatever option is selected there is no doubt that the 
theme gives the impression there is a lot going on. a lot for 
viewers to absorb. 

Mont, like all good themes, is fully responsive and 
Includes a theme customiser which makes It easy to find 
the perfect variation of theme that you want. 
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Source: bit.ly/10a0E91 
Price: $49 

Best used for: Directory 




UD iS SHORT for Ultimate Directory which gives a big ciue to 
what this WordPress theme is ali about. The theme is a content- 
focused directory portai that can be used to iist any type of 
business entity or activity Its flexibility is what makes it appealing to 
users who can modify the theme to work with any type of directory 
or listing they want. As with most contemporary theme it boasts a 
responsive design making it mobile-friendly Plus, it offers PayPal 
integration, an FAQ and 404 page template to complement the 
theme's core purpose. 

There's a lot going on with Ultimate Directory. The theme is 
designed and laid out so it pushes a lot of information to the viewer. 

The core component is a large map, which offers a search facility 
that allows users to add a keyword, choose a location and select a 
type before the outcome on the map. As you might expect, each 
location on the map comes with a neat popup with an image and 
more information. 

All the appropriate elements that are needed for a directory are 
included, including submission forms, a Yelp-like reviews section and 
the option to create different membership levels. 

This is a very comprehensive theme that's perfect for those 
looking to create a directory for their specific subject matter. 



Mono 

Source: demo.favethemes.com/wp/mono 
Price: $48 

Best used for: Personal blog 




MODERN AND MINIMAL is a simple and concise description of the Mono theme. 

The theme is aimed at the personal blogger but avoids the cliches and adds style. 

The layout of the theme is grid-based which it uses to great effect for mobile devices 
such as tablets and smartphones. 

The navigation is an element that avoids the cliches, adopting a simple vertical strip 
to the left of the page. Easy access to the complete menu is provided via the popular 
hamburger icon. The search facility doesn't hide away with a single-click taking it 
fullscreen. On the home page posts are accompanied by a featured image, which can 
be switched out for an alternative such as a video. Individual posts adopt the same 
minimalist design but scaled up. They also make good use of the sidebar to add 
further content. 



Roua 

Source: demo.stylishthemes.co/roua/ 

Price: $43 

Best used for: Portfolio/Personal Blog 

BUILT BY STYLISH themes, the Roua theme fits the bill perfectly. It is 

undoubtedly stylish and brings together a host of popular and 
contemporary elements that set it apart from many other themes. Roua 
adopts the popular fullscreen opener but It adds a subtle touch to the 
premise. There is a faded background image coupled with minimal text to 
ensure that the content is the focus. 

The content is accompanied by a simple menu icon, keeping the menu 
hidden until called upon. The menu uses the off canvas style and pushes 
the content to the side when active. The theme also adds in a host of social 
media icons. The blog element is portrayed as simple text until rollover 
when a full screen background image makes an appearance and adds a 
touch of class. 
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VAstudio 



Source: themes.fastwp.net/vastudio1 
Price: $43 

Best used for: Portfolio/Agency site 




THE VASTUDIO THEME is another one of those multi-taiented themes that give the owner a host 
of different options. It is at its core a creative one page theme with a focus on creative agencies, 
digital studios, personai freeiancers and photographers. On offer is a fuilscreen paraiiax option aiong 
with fuilscreen video background, fuiiscreen background slider and custom height paraiiax. Each of 
the different options adds a twist on the primary focus which is a fuiiscreen home page. 

To compiement the different design option there are a host of pages inciuding contact, about us, 
services, dients, portfoiio, biog and pricing. 

Behind the scenes the theme uses a visuai composer, which makes it even easier to create a 
unigue layout. Plus, the theme includes a host of icon fonts, CSS3 effects and animations, optimised 
code and is fully responsive. 



It’s me 



Source: http://klbtheme.com/itsme 
Price: $44 

Best used for: Portfolio/CV 



Fr. ]hone Doe 




start whara you ara. Usa what you 
hava. Do what you can. 







Everything 

Source: themes.kubasto.com/everything 
Price: $64 

Best used for: Multi-purpose 

THIS THEME CLAIMS to have everything and while this may 
not be quite true it does have a massive amount of options. 

Everything has the potential to be suitable for a variety of site 
types from creative portfolio to big corporate site to personal 
blog. If you are looking for something more functional then the 
site could take on the role of an online shop, or a video or image 
driven site. In fact, as the creators state, you name it, and 
Everything can create it. The flexibility instantly makes the 
theme an interesting and welcoming option. The theme offers a 
couple of colour schemes, dark and bright and as you might 
expect it's 100% responsive. And, in keeping with modern 
mobile devices it is also retina ready so your sites will look good 
on all the latest high resolution screens. 




EVERYTHING 



Th« molt 
handy 
WordPrass 
thama 



AN ONLINE PRESENCE is critical for anyone looking for a new job and even more important for 
those in the creative industry. An online portfolio/resume/CV is instantly available for prospective 
employers to look at. So, it needs to be good, it needs to make an impact and the It's me theme 
covers all these bases. 

The theme splits itself straight down the middle with space for a big image to introduce yourself 
and plenty of space to the right to add details. The left-sided image is fixed meaning that it will 
always be in view so make sure that it's a good one. Sitting in the top left comer is the option to add 
a personal thumbnail to allow viewers to see what you look like. Again make sure it's a good one. The 
right side of the page is dedicated to content. It is here that the user places all their relevant 
information. This is a space to sell yourself, so make sure that it's good. 



Everything has the 
potential to be suitable for a 
variety of site types, from 
creative portfolio to 
personal blog .f § 
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Source; bit.ly/lunYSfc 
Price; $48 

Bestused for; Video 



osnaptub« 








NAur« UrKl:;cJp^. 



THE VIDEO IS an often forgotten element of the WordPress 
theme. It makes it as a background and often makes Itself known 
in most posts. However, a dedicated theme is a rarity, but 
Snaptube happily fills the void left by others. The theme makes 
sure that its core focus, video, is very much in evidence on the 
home page. The popular image slide concept is called into action, 
substituting images for video. The full width slider gives users 
plenty of space to present a video collection, while giving the user 
plenty to contend with. 

The basic layout is standard stuff with videos neatly separated 
into a host of categories. There are no simple images here; users 
can get direct access to any video on the home page if desired. 
Individual posts add more credence to the video-watching 
experience supplying descriptions and embed codes. 

If the layout is not what you are looking then this is when the 
theme's features can be called into action. You can build your own 
custom layouts using the drag and drop interface. The theme is 
responsive and includes a host of features that add to its appeal. 
The addition of Google fonts support, retina ready and good 
video support make this a must for those looking to create a 
YouTube sensation. 



Rebloom 

Source; bit.ly/WtiElSu 
Price; $43 

Best used for; Multi-purpose 



WHEN IT COMES to WordPress themes it can be difficult 
to find a theme that has that spark of originality that’ll set 
your site apart from others. It Is difficult to come up 
with a unique and interesting angle for your blog based on 
the standard WordPress themes, but Rebloom does a good 
job of trying. 

The standard home page adopts the popular fullscreen 
image and couples this with an animated vertical navigation 
menu. The placement makes for a good user experience 
but it could offer more potential. And this is exactly what 
Rebloom does. It offers a variation of the home page with 
image slider and Ken Burns effect, plus there is the far 
more creative alternative layout. This offers a central 
navigation system which opens up the page and gives 
users two options to view simultaneously. 

Another useful addition is the simple Chapters layout, 
again an interesting addition to a theme definitely worth a 
first, second and third look. These are not the only features/ 
designs that grab the attention. 

The blog, while simple, still manages to be creative and 
functional. On the more practical side the responsive theme 
works really well on all desktop, tablet, smartphone and is 
also retina ready 
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Sequoia 



Source: blt.ly/1ro2ypX 
Price: $59 

Best used for: Online shop 




THE SEQUOIA THEME is at its very core an e-commerce theme, 
making it the perfect option for those who are looking to get oniine 
and start seliing, but with an added touch of styie and 
sophistication. The theme is described as 'A WordPress theme mainiy 
designed for usage with a WooCommerce piugin powered 
e-commerce site'. With the main parent theme there are an additionai 
three chiid themes for starting with a specific site or e-shop category 
- Fashion. Food or Handmade products. 

This means that it has a core theme with a host of themes that can 
be used in conjunction with the core theme. Each of the chiid themes 
has a number of different styies. For exampie. Fashion has four buiit-in 
choices, whiie Food and Handmade have a coupie each. These are aii 
weii-presented with contemporary styiing, on trend fonts, typography 
and coiour schemes. Pius, six header styies ensure that the ideai 
option is found for the shop. 

On a more practicai ievei and to provide stabiiity and peace of mind 
the buiid of the theme is based on the very popuiar responsive 'mobiie 
first' framework Zurb. This is extremeiy weii-supported and 
documented if you fancy making any changes. 

However, we wiii ieave it to the creators of Sequoia to perfectiy 
describe its taients, 'There are no iimits to what kind of sites can be 
created with Sequoia'. Enjoy. 



With the main parent 
theme there are an additional 
three child themes 



WPJobus 



Source: alexgurghis.com/themes/wpjobus/ 
Price : $53 

Best used for: Business 




THE WPJOBUS IS a theme with more than just one 
purpose. It has an overall focus but at its heart it acts as a job 
board, personal resume and company profile. If you run your 
own business or company and want to teli everyone who you 
are. what you can do and even let other people know what 
jobs you have on offer, this Is the theme for you. 

The beauty of the theme is its flexibility and functionality. 
The job board provides the option to browse, search, filter 
and refine. And there is no reliance on third-party plugins 
to power the functionality. The options are specifically 
coded for the theme. Another noteworthy feature is that 
it is Stripe ready. This means that it has an instant 
monetisation model built-in. 

The functionality of the theme is equally matched by its 
styling. It boasts all the latest and popular Ul elements which 
mean that it won't look out of place on today's web. Plus, the 
professional layout and design will give the right Impression 
and encourage users to want to interact. 

Finally, If you want to get more out of the theme it can be 
used as a base to create something similar. All it needs is a 
little imagination to take beyond its very useful core. 
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Maxi 



Source: http://maxi.themeo.us/ 
Price: $44 



; News 




NEWS THEMES ARE multi-talented creations, they can be used for almost any type of blog or 
site. The Maxi theme is dedicated to dispiaying an impressive number of stories or posts in a visuaiiy 
appeaiing manner. The centrepiece of the defauit iayout is the image-ied siider that uses different 
sizes to create a hierarchy and entice the user to ciick. 

Further down the page it is white space that puiis apart posts and stories and gives them pienty 
of breathing space. The design continues as its heads towards the footer, ensuring that the reader is 
aiways getting pienty of content to choose from without being distracted. 

Maxi is a lightweight - which means quick - theme thanks to its minified CSS and JavaScript and 
balanced image sizes. It is also optimised for search engines and has extra layouts if desired. 



Eight Degree 



Source: www.webdingo.net/eightdegree 
Price: $43 

Best used for: Multi-purpose 



SUPER GOOD 



EIGHT DEGREE COMES in a number of guises making it a very flexible theme. The popular 
fullscreen image background is employed here and coupled with contemporary fonts to make it 
very 'now'. The basic option is a simple fullscreen image background while there are parallax slider 
and image slider options to take control of the top of the page. These are only the icing on the cake, 
or topping on the theme. Each version of the theme offers a lot more that users will love. 

The theme proves all the popular sections you would expect in a site: about, team, portfolio, 
clients, blog, contact and as an added extra, prices. It is these pages that give the theme its flexibility. 

Alongside its more functional talents it boasts a modern and clean design and a layout that makes 
it stand out from its competitors. 



Literatum 

Source: kohette.com/wpthemes/literatum 
Price: $43 

Best used for; Personal blog 

LITERATUM IS AN excellent theme for those who want to 
present their written work in a contemporary and clean 
magazine style. The layout of the theme is simple, smart and 
engaging thanks to its use of large photos and images. These 
offer instant impact and are combined with neat, well 
proportioned text. The home page is image overload, but 
delving into the individual posts reveals a more sedate and 
minimalist approach to the content. Each post kicks off with 
a fullscreen Image before revealing a column of neatly stacked 
text interspersed with images. So. what features does the 
theme have? 

It offers the option to replace the featured image with a video, 
giving fullscreen video at the top of each post. There is 
comment integration via Eacebook and Disqus plus over 400 
different icon fonts to add a little extra visual interest with ease. 

f tti 



5 Years Cruising the World, 
They Still Living the Dream 




Literatum offers the 
option to replace the 
featured image with a video 
at the top of each post f -f ' 
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LEARN HOWTO CREATE YOUR VERY OWN WORDPRESS THEME FRAMEWORK FROM SCRATCH 



ONE OF THE most powerful things with WordPress is its 
versatility when it comes to themes. Despite the fact that 
WordPress blogs are largely built upon the same building 
blocks the differences between one project and the next can 
be staggering. This is why it can be such a rewarding process to get 
stuck into theme building. With just a little knowledge on HTML and CSS 
you can assemble a blog that is truly your own creation. Over the next 
few pages we will build a theme from scratch and at the end you will 
have a theme that you can keep handy as a starting point for any of 
your future projects. 

Before you get started there are a couple of things that you will need. 
Firstly, a code editing program such as Notepad++, a working WordPress 



installation with at least one theme installed and FTP access to your 
WordPress installation (but this is not essential). 

The next step is to come up with a name for your theme. Something 
simple will do for now as we're only building a theme for our own blog 
(as opposed to sharing it with the WordPress community). Once you 
settled on a name you can create a folder named after your theme and 
save it somewhere on your hard drive. Eventually we will upload this 
folder to the wp-content/themes folder either via FTP or through the 
WordPress Dashboard. 

With regards to this tutorial we will be making a simple theme 
consisting of a header, main area, sidebar and footer. You can find all the 
code and source files at www.web-designer.co.uk/tutorial-files. 
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Theme structure 

WordPress themes are made up of template files 
that dictate the iayout of your content. The actuai 
content (posts, images, etc) does not form part of 
these tempiates. Instead, the content is stored 
eisewhere within the WordPress database. The 
template files reside within a specific foider for 
your theme within wp-content/themes. Think of 
them as the buiiding biocks of your WordPress 
site. They aii come together to create the web 
pages on your site. Within the foider you wiil 
aiso find a styie sheet that wili dictate the iook of 
your theme (background coiours etc). At its 
most basic ievel the foider for your theme 
should include at least the first five of 
these templates. 

header.php - This file contains the code for the header 
section of the theme; 

index.php - This is the main file for the theme. It 
contains code for the Main Area and specifies where 
the other files will be included; 
sidebarphp - This file contains the information about 
the sidebar; 

footer.php - This file will handle the footer; 
style.css - This file will handle the styling of your theme; 
single.php - how a single post appears on your blog 
page.php - for single pages 

As you become more confident more template 
type can be added to the directory to cover other 
aspects of your blog. These include templates for 
viewing a single post, pages and comments. 

Template tags and code 

A template tag is essentially an instruction that 
commands WordPress to 'do' or 'get' something. An 
example of this can be found in the header.php file 
where WordPress can be instructed to display the 
name of your blog. The code may look like this: 

<hlx?php bloginfo( 'name') ; ?></hl> 

At each end of the code we have HI Instructions 
to apply a Header 1 size text. Everything else 
between these Is the template tag. Note how the 
actual title of the blog does not appear in the tag 
itself. That is because the template tag 'gets' this 
information from your user profile. In this example 
the 'name' section instructs the tag to fetch the 
name of the blog (this Is known as a parameter). If 
you swapped the 'name' for another parameter 
another piece of information would be displayed 
instead. 'Description' for example would display 
the tagline for your blog whilst 'uri' would show 
the website address. 

This approach means that the code can 
be installed to any other blog and it will 
perform the same function without the need for 
it to be altered. 




<above> The bare bones of our 
WordPress theme 



Top tip 



A useful way of 
testing your creation is to 
set up a free web hosting 
account. Sites such as 
hostawesome.com can 
supply enough 
resource. 



Mobile adapation 

It's important to bear in mind how your website 
will appear on a mobile device. More and more 
people are accessing the internet whilst on the 
move. Whilst you can create code that can adapt 
your theme to be mobile we don't have the space 
here to cover all of the aspects. As a guick (and 
somewhat effective) workaround a mobile plug-in 
such as WPTouch can convert your content into a 
mobile-friendly layout. 

About this build 



What about 
child themes? 

Child themes allow you to modify an existing 
theme without actually making any direct edits 
its code or tempiates. it works by importing the 
attributes of an existing theme (in this case 
known as the parent theme) via a command in 
the style.css file. Extra coding can then be 
added to the style.css file that takes precedent 
over what has been imported from the original 
parent theme. 

You can create a child theme from any 
already existing theme and it will reside within 
a separate self-named directory within your 
themes folder. In your WordPress Dashboard it 
will also appear as a new entry. This is how the 
original theme stays unaltered; the child and 
parent themes exist as two separate entries 
where one (the child) is dependent on the other 
(the parent). 




This build is a pretty basic setup. It's more 
designed to get you up and running and give you 
an idea of how the main pieces come together. To 
that effect it's not going to be the prettiest theme 
in the world. Theme building is something of a 
long term skill, even experienced users find new 
techniques and approaches from time to time. 
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Create the header 

The header is an essential component of your 
WordPress theme. It will most likely be the first thing 
that people see when they stumble upon your 
creation. In the header you can perform tasks such as 
displaying your blog name, adding a tagline or 
perhaps applying an image at the top of your blog. 
From a code perspective the header is where 
everything begins. It is also in the header that you link 
to your stylesheet, further setting up how the theme 
will look in a web browser. 

m Marking a start 

Open your notepad program and enter the 
above code into a new file. The first line is a 
declaration of the DOCTYPE. we have gone for a 
FITIVILE version which is recommended. This is 
followed by an opening <html> tag. We've also added 
an attribute for the character encoding, it's nothing 
major to be clued up about, just be sure to include it 
We're now ready to start adding the FITML that will 
set up our header 

<! DOCTYPE html> 

<html> 

<head> 

<meta charset=”utf-8” /> 



AO Fetching the title 

Next we'll get WordPress to retrieve the 
information about our blog. The php tag after <title> 
requests the page information from the wordpress 
database. We've added a T as a separator for the 
information for that and the blog name which has 
been requested in the bloginfo line. Then we close off 
the <title> tag at the end. 



< title> 

<?php wp_title( ' I ' , 'true', 'right'); 
bloginfo( 'name' );?> 

</title> 



Applying the style 

We need to tell WordPress how everything 
needs to look. So here we are linking to the 
stylesheet. We've opened a link tag and used 'rel' to 
define the relationship. We've gone for an approach 
that will tell WordPress to look for the style.css file that 
will be saved within our theme folder. Below this is 
another php tag that uses a hook to grab information 
stored in the WordPress core files. Essentially it's a tag 
that works with WordPress settings. 

<link rel="stylesheet" type-"rext/css” 
href="<?php bloginfo( 'template_url ' );?>/ 
style. css"> 

<?php wp_head();?> 

</head> 

Display the title 

Flere is the command that puts our blog 
title at the top of the page. Eirstly we've placed a 
command that will apply a border as per the style.css 
file (more on that later). Eollowing this is a command 
to generate a URL link for the home page which is 
then applied to the title. You can also put normal text 
between the FI1 markers but the idea here is to make 
the theme dynamic so it can be used with any blog. 

<div id="header"> 

<header> 

<hlxa href="<?php echo home_ 

uric / ' )?>"><?php bloginfo( ' name ' )?></ax/hl> 

</header> 

Navigation bar 

This part is now added to the code. It adds 
a little navigation section underneath our blog title. 
This can be used for navigating to the other pages 
that are on your blog. This is a default WordPress 
navigation menu where the links are displayed as 
bullet points. 






<nav> 

<?php wp_nav_menu 0 ; ?> 

</nav> 

<div id="container”> 

</html> 

Bring it together 

So this is how our headerphp file should 
look with all of our code in it. Enter it all into a 
notepad program and save it as headerphp. You can 
either upload it as it is to your theme folder in your 
WordPress via ETP or wait to zip it later for upload 
(we'll cover this approach later on). 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<titlex?php 

wp_title('|', 'true', 'right'); 
bloginfo( 'name' ); 

?> 

</title> 

<link rel="stylesheet" href="<?php 
bloginfo( ' stylesheet_url ' )?>" /> 

<?php wp_head()?> 

</head> 

<div id="header"> 

</header> 

<hlxa href="<?php echo home_ 

url ( ' / ' ) ?>"x?php bloginfo( ' name ' ) ?x/ax/hl> 

</header> 

<nav> 

<?php wp_nav_menu 0 ; ?> 

</nav> 

<body> 

<div id="wrapper"> 

</div> 










A N«w Po«t 
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Code library 

Exploring the header 



It is essential to keep the 
<html>, <head>, <title> tags as 
these will remain important 
even in your new code 



The id tag aliows you to 
identify the elemeht of the 
CSS codihg so you cah 
edit the style sheet 
without having to locate a 
specific part of the code 



For usability it is best to 
keep your navigation bar 
at the top. By usihg this 
piece of code you can 
ensure that it remaih hear 
thebiog header 



Ohce you are done with the 
header ahd havigatioh. 
you'll be able to add in 
everything else after it. So 
end the <nav> tag a ahd it is 
time to start with the body 



001 <!doctype html> 

002 <html> 

003 <head> 

004 <meta charset="utf-8" /> 

005 <titlex?php 

006 wp_title( ' I ' , 'true', ’right’); 

007 bloginfo( ’name’ ); 

008 ?> 

009 </title> 

010 <link rel="stylesheet" href=”<?php 
bloginfo( ’ stylesheet_url ’ ) ?>” /> 

011 <?php wp_head()?> 

012 </head> 

013 <div id=”header"> 

014 </header> 

015 <hlxa href="<?php echo home_url(’/’)?>”x?php 
bloginfo( ’ name ’ ) ?x/ax/hl> 

016 </header> 

017 <nav> 

018 <?php wp_nav_menu() ; ?> 

019 </nav> 

020 <body> 

021 <div id=”wrapper”> 

022 

023 </div> 



So this is how our header.php file should 
look with all of our code in it. Enter it all into a 
notepad program and save it as header.php. You 
can either upload it as it is to your theme folder 
in your WordPress via FTP or wait to zip it later 
for upload (we’ll cover this approach later on 
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Creating sidebars 

A sidebar is usuaily a narrow verticai coiumn 
that runs down the side of the screen (aithough 
sometimes it can also be a horizontal section 
below the main content). Some blogs have 
multiple sidebars set up within a theme but for 
our project we will keep things simple and just 
stick to one. 

Sidebars are a useful feature to add to a blog 
as they can display content that would not 
necessarily form part of the main articles. 

Beyond this they can also provide navigation to 
other areas of blog, list categories, your previous 
posts or hold widgets that can perform various 
functions. 



Creating a sidebar is done by entering the 
relevant code into a blank notepad program and 
saving the file as sidebar.php. This will then sit in 
the corresponding theme folder within your _ 

installation. When a web browser loads your | 
webpage it will then be requested by the index, 
php file and added to the relevant part of the ■ 
display layout. I 

For our theme we have kept things simple. We 
have added a categories section and a list of 
archived posts. These are applied by using 
internal WordPress functions that generate these 
details. As with the header the actual details 
themselves are not entered directly into the 
code for the sidebar. Instead the information is 
fetched via php enquires. 



1 



i <div id=''sidebar''> 

<h2 ><?php _e( ’Categories'); ?x/h2> 

<ul > 

<?php wp_list_cats( 'sort_column=name&optionco 
junt=l&hierarchical=0'); ?> 
r</ui> 

<h2 ><?php _e( ’Archives'); ?x/h2> 

[<ul > 

I <?php wp_get_archives(’type=monthly’); ?> 
r</ul> 

[</div> 



Creating the footer 

The footer resides at the bottom of your design. It can 
contain links, menus, navigation icons, pretty much 
anything you like. On a basic level it closes the HTML 
tags that have been opened in the header such as 
<body> and <html>. In the case of our created theme 
we've kept things pretty simple. 

m Add the code 

Here is a basic example of what to put inside a 
footer. We have opened a footer tag and entered some 
basic text to highlight that what is at the bottom of the 
page is indeed the footer. Add this code to a text file and 
save it as footer.php 



<div id="footer"> 

<footer> 

And down here we have the footer 
</ f ooter> 

<?php wp_footer() ; ?> 

</div> 

</div> 

</body> 

</html> 



AO Style and content 

\0Am The code in this footer is purely text only, it 
does nothing in regard to how the footer will actually 
look. The code is below is what will eventually be added 
to the style.css file in order to make it look a bit more 
pleasing to the eye. In this case it will be 90% of the post 
body, have a black background and white text. 



footer { 

width; 90%; 
background: #000; 
color; #fff; 



border-radius: 5px; 
} 




* t i t » ' i \ ' I 

The footer can contain links, 
menus, navigation icons, pretty 
much anything you like 



70 WordPress Genius Guide 






Word Press 
Genius Guide = 



Index 

One of the main files of your WordPress installation 
will be index.php. It's the first file that loads when 
someone visits your WordPress site. It controls what 
functions the site will display and how. 

The basics 

m in its most basic form this is what our 
index file will do. These commands will 
request the templates for the header, sidebar 
and footer and then display them on our page. 
We also need to insert the content (ie our posts). 
This is not requested from a separate template. 
Instead, the layout is created within this file. This 
layout will be known as the WordPress loop. 

<?php get_header() ; ?> 

<?php get_sidebar() ; ?> 

<?php get_footer() ; ?> 



Grabbing your posts 

This code needs to be inserted after 
the first line of Step 1 and deals with 
the main content of the blog ie your posts. It 
initially makes WordPress check for any posts 
that have been created in your database. Once 
the posts have been found, the code then 



informs WordPress what needs to be done with 
the information. 

<div id="main"> 

<div id="content"> 

<?php if (have_posts()) : while (have_ 
postsO) : the_post(); ?> 

<hlx?php the_title(); ?></hl> 

<h4>Posted on <?php the_time( 'F jS, Y') ?></ 
h4> 

<px?php the_content( ('(more...)')); ?x/p> 

<hr> <?php endwhile; else: ?> 

<px?php _e('Sorry, no posts matched your 
criteria.'); ?x/px?php endif; ?> 

</div> 



Rounding things up 

These lines finish the code for our 
index file. They break up the main area 
from the sidebar and the footer. At the very 
bottom is the request for the footer which will sit 
at the bottom of our web page. 



</div> 

<?php get_sidebar() ; ?> 
</div> 

<div id=”delimiter”> 
</div> 



<?php get_footer() ; ?> 



The complete code 

X Here is how the full list of code will 
look within our index file. It's a fairly 
simple arrangement compared to index files 
from the default WordPress themes but for the 
purposes of our blog it will work just fine. 



<?php get_header() ; ?> 

<div id="main"> 

<div id="content"> 

<?php if (have_posts()) : while (have_ 
postsO) : the_post(); ?> 

<hlx?php the_title(); ?x/hl> 

<h4>Posted on <?php the_time('F jS, Y') !></ 
h4> 

<px?php the_content( ('(more...)')); ?x/p> 

<hr> <?php endwhile; else: ?> 

<px?php _e( 'Sorry, no posts matched your 
criteria.'); ?x/p> 

<?php endif; ?> 

</div> 

<?php get_sidebar(); ?> 

</div> 

<div id="delimiter"> 

</div> 

<?php get_footer() ; ?> 



Content 



Among the files in your WordPress installation there wili also be a file 
named functions.php. It's a powerful file that can add extra functionality 
to your WordPress installation. It works like a plugin within your theme 
so you can modify features without editing any of the core WordPress 
files. As per the other templates these functions are called upon when 
needed by the index.php file. 

If you're using a child theme it's worth noting that functions do not 
work in the same way as the style.css. In the case of style.css the choice 
made there will override the parent theme. With functions.php both files 
from the child and parent theme will combine and complement each 
other. To that extent, if you don't need any new functions for your child 
theme then you don’t even need to create a function. php file. 

There are too many options to list here when it comes to adding 
functions so it's worth scouring the internet for the kind of functions you 
feel you may need. As an example this code will add section to your blog 
that displays the most popular posts. 



<h2>Popular Posts</h2> 

<ul> 

I <?php $result = $wpdb->get_results("SELECT comment_ 
count, ID, post_title FROM $wpdb->posts ORDER BY comment_count DESC 
LIMIT 0 , 5"); 

foreach ($result as $post) { 
setup_postdata($post) ; 



$postid = $post->ID; 

$title = $post->post_title; 

$commentcount = $post->comment_count; 
if ($commentcount != 0) { ?> 

<lixa href="<?php echo get_permalink($postid) ; ?>” 
title="<?php echo $title ?>"> 

I <?php echo $title ?x/a> {<?php echo $commentcount ?>}</ 

li> 

<?php } } ?> 

</ul> 
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Content 



Content from your blog is displayed within an area 
known as the loop. Arguably one of the most 
powerful sections of your blog, the loop is a special 
section of code that displays your posts and 
comments wherever you place it. 

m Locate the loop 

We've actually already featured the loop 
within our index.php from earlier in the tutorial. Here 
is the section of code from the index.php file where 
it appears. 

<?php if (have_posts()) : while (have_ 
postsO) : the_post(); ?> 

<hlx?php the_title(); ?x/hl> 

<h4>Posted on <?php the_time('F jS, Y') ?></ 
h4> 

<px?php the_content( ('(more...)')); ?x/p> 

<hr> <?php endwhile; else: ?> 

<px?php _e( 'Sorry, no posts matched your 
criteria.'); ?x/p> 

<?php endif; ?> 

AO Adding extra features 

The example of the loop from Step 1 is a 
fairly simple application of the code. It's possible to 
add code to enhance how the posts are applied to 
your blog. In this case the code will add web links 
under every post that navigate to the previous post 
and the next post. 

<?php comment_form() ; ?> 

<div class="prev-next-links"> 



<ul> 

<lix?php next_post_link() ; ?x/li> 

<lix?php previous_post_link() ; ?x/li> 

</ul> 

</div> 

</article> 

AO Other loop elements 

These are other examples of the elements 
that can also be added to the loop and applied to the 
appearance of your posts. It's a good example of 
how much control WordPress offer with regards to 
building a theme. More Loop examples can be found 
on The WordPress Codex at http://codex.wordpress. 
org/The_Loop. 

the category - Displays the category or categories 
associated to the post or page being viewed 
the author - Displays the author of the post or page 
the content - Displays the main content for a post or 
page 

the excerpt - Displays the first 55 words of a post's 
main content then with a [...] or read more link that 
goes to the full post. The length of excerpts can be 
controlled by using this slightly advanced method or 
by using the Excerpt field on the post edit page, 
the shortlink - Displays a link to the page or post 
using the uri of the site using the ID of the post or 
page 

C\/^ Our enhanced index 

So here is how the loop will appear within 
the Index code. To apply this we need to add it to the 
index.php file. Open your browser and refresh the 
page to see how the new changes look on your blog. 



<?php get_header(); ?> 

<div id="main"> 

<div id="content"> 

<?php if (have_posts()) : while (have_ 
postsO) : the_post(); ?> 

<hlx?php the_title(); ?x/hl> 

<h4>Posted on <?php the_time('F jS, Y') ?x/ 
h4> 

<px?php the_content( ('(more...)')); ?x/p> 

<?php comment_form() ; ?> 

<div class="prev-next-links"> 

<ul> 

<lix?php next_post_link() ; ?x/li> 
<lix?php previous_post_link() ; ?x/ 



li> 



</ul> 



</div> 



</article> 



<hr> <?php endwhile; else: ?> 

<px?php _e( 'Sorry, no posts matched your 
criteria.'); ?x/px?php endif; ?> 

</div> 

<?php get_sidebar() ; ?> 

</div> 

<div id="delimiter"> 

</div> 

<?php get_footer() ; ?> 



Hello world! 

Posted on July 3rd, 2014 

Welcome to WordPres::. This Is your first post. Edit or delete it. then start btogglngl 

Leave a Reply 

Loyytfd In ak admin . 



Top tip 

While the theme we’re 
building works as a 
jumping off point, it’s 
worth planning ahead for 
your future projects. 
Sketch out your 
ideal blog. 



Comment 

You rrwiy HIMI orwl nttnhnt^* «« lmi*..*** «— » 

tetecuK***) <«m> <i> e&te***> <9tribc> <9troAf> 

PoatCominU 

. A hew Pott » 



72 WordPress Genius Guide 





Word Press 
Genius Guide = 






style 

We've mentioned previously about how the code in your template is just 
that. It sets up the layout of your blog but does not instruct on how it will 
look. You will need to create a file called style.css and enter the code below 
into it. The code in this example is largely made up of two parts. The first 
section is what helps WordPress recognise that this file is part of a theme. 
The text between the /* and */ markers are used as meta data which 
WordPress will use as a description for your theme on the Dashboard. 

The second part is the actual instruction on how each section will look. 
We've have applied a selection of blue colours via hexadecimal code and 
decided on the font that will be applied. Margins and sizes of areas have 
also been addressed. The benefit of this approach is that when it comes to 
making more themes you can keep the templates the same but really 
change things up in the style.css file. 



Theme Name: mynewtheme 

Theme URL: http://mynewtheme.esy.es 



Description: An example of a theme that I made 
Version: 1.0 
Author: Paul 

Author URL: https://munkeyplustypewriter.wordpress.com 
Mags: theme 




body { text-align: center; } 

#wrapper { display: block; border: Ipx #a2a2a2 solid; width:90%; 
margin:0px auto; border-radius: 16px} 

#header { border: 2px #a2a2a2 solid; border-radius: 16px} 
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; 
border-radius: 16px } 

#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; 
border-radius: 16px } 
idelimiter { clear: both; } 

ifooter { background: #000; color: #fff; border-radius: 5px;} 
.title { font-size: llpt; font-family: arial; verdana; font- 
weight: bold; } 



The finished product 



With your templates and style.css flies coded all you 
need to do now Is add them to your WordPress 
Installation. You can use an FTP program to access 



your Installation and upload your new folder to the 
WordPress themes directory. Alternatively you could 
compress you local theme folder into a zip file. From 



the WordPress Dashboard you can select 
Appearance>Themes>Add Theme>Upload Theme and 
select your newly zipped folder. 




Top tip 

Create a 600px by 
450px image. Save as 
screenshotpng in the 
theme folder. It adds a 
theme screenshot to 
your dashboard’s 
Theme panel. 



When it comes to 
making more themes 
you can keep the 
templates the same 
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Build a 
responsive 
Word Press 
theme 

AS THE MOST ADVANCED RESPONSIVE ERAMEWORK 
AVAILABLE, ZURB’S EOUNDATION IS IDEAL EOR YOUR 
LATEST WORDPRESS PROJECT 



^ 

TUTORIAL 

OBJECTIVE 

Create a theme that adapts 
to mobile devices 

TIME REQUIRED 

2 hours 




THERE ARE MANY great themes on 
WordPress you can customise. We will be 
using Zurb's Foundation framework for the 
■= purposes of this tutorial. Previously to 
incorporate the theme into WordPress you had to 
manually link the necessary JavaScript and CSS using 
the WordPress functions 'wp enqueue script' and w'p_ 
engueue style'. But now, thanks to Zurb and the 
popularity of WordPress, Zurb has provided a starter 
theme called FoundationPress, which you can 
download directly from its GitHub page to start building 
your own WordPress theme. 

The purpose of this ultimate starter theme is to act as 
a springboard; it comes packed with useful reuseable 
components, a 12-column responsive grid, JavaScript 
functions and much more. This starter theme contains 
all the necessary design elements, including the 
JavaScript and CSS libraries. 

Still, FoundationPress is not an all-in-one WordPress 
theme with plugins, shortcodes, custom options or 
custom templates - it is only to be used as a starting 
point. Luckily it has done most of the hard work for us 
including setting up widgets, navigations, displaying 
blog posts and general clean-up of WordPress. 




Download FoundationPress 

To begin, make sure you have the latest version 
of WordPress installed and set up. Head over to the 
FoundationPress starter theme GitHub page: github.com/ 
olefredrik/foundationpress and download this theme. 
Once you've downloaded it, extract it and upload it to your 
theme's directory in WordPress and activate it. 

Custom stylesheet 

start by opening up the 'header.php' file in your 
text editor. You'll want to add in your own custom 
stylesheet so that when it comes to upgrading 
FoundationPress it won't override any custom work. You 
may use Sass with Foundation, but to allow beginners to 
follow along this tutorial, we'll be using pure CSS. 

001 <link rel=“stylesheet” href=”<?php echo get 
_template_directory_uri(); ?>/style.css” /> 

Customise the menu 

WordPress already features a built-in 
Appearance Menus Screen, enabling users to create 
custom navigation. FoundationPress takes this a step 
further by allowing us to create multiple navigations on 
either side on the nav bar. When you create a new menu 
in WordPress, you have the option to enable your 
navigations for mobile devices. 

Customise the header 

FoundationPress has already pre-written a lot 
of the WordPress basic theming. We're going to dive in 
and modify it. To give this theme a visual punch we're 
going to add in a header with the website name. 







including a gradient background. Open up the 'header, 
php' and paste in the following HTML code. 



001 <header class=“main-head”> 

002 <div class=”row”> 

003 <div class=”large-12 columns”> 

004 <hl class=”title”x?php bloginfo 
( ‘name’ ); ?></hl> 

005 </div> 

006 </div> 

007 </header> 



OC style the header 

With our header implemented we'll now need to 
style it. Open up 'stylecss' in the FoundationPress starter 
theme, start by giving the main header a gradient 
background, using CSS3 gradient. Position the main hi 
above the header. Let's make all characters upper-case and 
give it a text shadow to stand out from the light backdrop. 



001 .main-head { 

002 margin-bottom: 2em; 

003 padding: 1.2em; 

004 background: #00b3d3; 

005 background: -moz-radial-gradient(center, 
ellipse cover, #00b3d3 0%, #007295 
100 %) ; 

006 background: -webkit-gradient(radial, 
center center, 0px, center center, 100%, 

color-stop(0%,#00b3d3) , color-stop 
(100%, #007295)); 

007 background: -webkit-radial-gradient 
(center, ellipse cover, #00b3d3 0%, 
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#007295 100%); 

008 } 

009 .main-head hi { 

010 text-align: center; 

011 font-weight: 900; 

012 text-transform: uppercase; 

013 letter-spacing: 10px; 

014 text-shadow: Ipx Ipx 2px rgba 
(50, 50, 50, 0.59); 

015 font-size: 2.5rem; 

016 color: #fff; 

017 } 

Add a search 

Currently in our widgets list, the search form is 
located in the sidebar. In WordPress Widgets we can 
disable the search widget Now inside our 'head.php' at 
the very bottom, paste in the following function, which 
will print out the search form. We're going to place our 
search form just below the header of our website. 

001 <?php get_search_form() ; ?> 

Customise search 

# With the get search form function added in 
our 'header.php' we can now structure this search form 
by editing the 'searchform.php'. Directly below the form 
tag we have applied a row <div> and changed the default 
grid layout to use the large grid system as well as setting 
some custom classes to be referenced in our CSS. 

001 <div class=“row”> 

002 <?php do_action(‘foundationPress_ 



003 

004 



005 

006 

007 

008 



009 



searchform_top ’ ) ; ?> 

<div class=“large-8 columns searchbox”> 
<input type=“text” value=“” name=“s” 
id=“s” placeholder=”<?php esc_attr_e 
(‘Search’, ‘FoundationPress’); ?>”> 
</div> 

<?php do_action( ‘ foundationPress_ 
searchform_before_search_button ’ ) ; ?> 
<div class=“large-4 columns 
searchbutton”> 

<input type=“submit” id=“searchsubmit” 
value=“<?php esc_attr_e(‘Search’ , 
‘FoundationPress’); ?>” class=”prefix 
button”> 

</div> 



Modify index.php 

The 'index.php' is the main template in 
WordPress theming hierarchy We're going to modify 
it and remove some of the grid components and 
place them in 'content.php' instead. Remove the 
<div> row and grid classes just below the 'get header' 
function and replace it with the code below. Finally, 
migrate the <?php get sidebarO; ?> just above the 'get_ 
footer' function. 

001 <?php get_header() ; ?> 

002 <div class=”row” data-equalizer> 

rjQ Blogpost 

With the home page structure completed, 
we'll want to structure each blog post in a grid column 
of four rows: this will lay out three blog posts organised 



Top tip 

Make sure that you have 
Node.js, Grunt and Bower 
installed locally so you 
can perform an update 
to the Foundation 
framework. 



next to each other on a large monitor. Using the grid 
system will force our layout to be responsive. Remove 
the original code all the way down to the <footer> tag 
in 'contentphp'. 

001 <div class=”large-4 columns” role=”main”> 

002 Orticle id=”post-<?php the_ID(); ?>” 
<?php post_class( ‘panel’); ?> data- 
equalizer-watch> 

003 <header> 

004 <h2xa href=”<?php the_permalink() ; 
?>”><?php the_title(); ?x/ax/h2> 

005 </header> 

006 <div class=”entry-content”> 

007 <figurexa href=”<?php the_permalink 
(); ?>”x?php if ( has_post_ 
thumbnail 0 ) {the_post_thumbnail 
(‘large’); } ?x/ax/figure> 

008 <?php the_excerpt() ; ?> 

009 <p>Posted on <?php the_time(‘F jS, Y 
’); ?> in <?php the_category(‘ , ‘); 
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RESPONSIVE WEBSITE WITH 
FOUWDATTO-N FRAMEWORK 



Laovea Reply 




<above> 

• Here we have our fully responsive WordPress site, 
resizing to perfectly display on all screen sizes 

<top ieft> 

• Easily set up and use shortcodes in your site to take 
advantage of Foundation's library of components 

< bottom lef t> 

• Using WordPress shortcodes, we were able to add 
Foundation's alert box components throughout the site 



Top tip 

All Sass variables are 
located in scss/config/_ 
variables.scss and your 
site structure within 
scss/site/ structure. 



?></p> 

010 <p class=”byline author”>Written by 

<?php the_author_posts_link() ; ?> 
</p> 

011 <a href=”<?php the_permalink() ; ?>” 

class=”button”>Read more</a> 

012 </div> 

Style the blog 

with our blog post structure set up In a grid 
column in a set of threes, we'll now implement some 
simple styling to this home page. Back in our 'style.css', 
we'll add some box shadow so the panels don't look so 
flat. We don't need to style the panels themselves as 
these styles are already set up inside Foundation. 

001 .panel { 

002 box-shadow: 0 Ipx 5px #D5DEE5; 

003 } 

004 figure { 

005 margin: 0; 

006 } 

007 .entry-content figure img { 

008 margin: 10px 0; 

009 } 

010 @media only screen and 
(min-width: 40.063em) { 

011 h2 { 

012 font-size: l.Srem; 

013 } 

014 } 

Style search form 

With our blog posts neatly organised in a row 



of threes, our search field and search button are 
not quite aligned with the rest of the design. Let's fix 
this by adding some padding. With a mobile-first 
approach. Foundation takes care of the responsive 
nature - It's unnecessary to add styles for mobile or 
tablet devices. 

001 .searchbox, .searchbutton { 

002 padding: 0 15px; 

003 } 

004 

Move the sidebar 

Rather than having our sidebar situated on 
the right-hand column, we will position it directly 
below all the blog posts and just above the footer. 
Inside the 'sidebar.php' we're going to use 
Foundation's Equalizer component, which will set 
equal height to all the widget panels. We simply 
place the data-equalizer attribute to the parent 
container here. 

001 <div class=”bottom-sidebar”> 

002 <aside id=”sidebar” class=”row” data- 
equalizeO 

003 <?php do_action(‘foundationPress_ 

before_sidebar’); ?> 

004 <?php dynamic_sidebar(“sidebar- 

widgets”) ; ?> 

005 <?php do_action(‘foundationPress_ 

after_sidebar’); ?> 

006 </aside> 

007 </div> 

008 



Widgets 

Now to actually lay out our widgets, we will 
need to open up the 'widget-areas.php' located in the 
library directory. Inside the first array on line 8, remove 
what is currently there and replace it with the below, 
which uses the large-4 grid and a 'data-equalizer-watch' 
attribute that the Equalizer component requires to set 
equal heights to each panel. 

001 ‘before_widget’ => ‘Orticle id=”%l$s” 
class=”widget %2$s large-4 columns”xdiv 
class=”panel” data-equalizer-watch>’ , 

Style the sidebar 

Within WordPress in the Widgets panel, we only 
require three widgets so remove any of the other 
existing ones. When you check the homepage you will 
notice our widget panels all have equal heights to the 
tallest panel. To finish up with our sidebar beneath our 
blog posts, we will give this section its own background 
colour and some padding. 

001 .bottom-sidebar { 

002 padding-top: 10px; 
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003 background-color: #cecece; 

004 } 



16 



Set up shortcodes 

Because there is a vast amount of 



components available in Foundation, we convert some 
of them into shortcodes so that we can reuse these 
components whenever we're in the editor. Creating 
shortcodes requires two steps: create a primary handler 
method and hook up the handler into WordPress. 

Inside the 'functions.php' we need to set up our 
primary function. 



001 function foundation_add_alerts 
( $atts, $content = null ) { 

002 extract( shortcode_atts( array( 

003 ‘type’ ‘ , 

004 ‘shape’ => ‘ ’ , 

005 ‘close’ => ‘true’, 

006 ‘class’ => ” 

007 ), $atts ) ); 



d ^ Shortcode array 

I # In the previous code snippet we noted that our 
function receives the parameters of type, shape and 
close. We're going to use this to display alert boxes 
using one of Foundation's components. The type 
attribute will display success, warnings or informative 
information using this shortcode. Let's set up an array 
that will capture these attributes. 



001 $class_array[] = ( $shape ) ? $shape : ‘ ’ ; 

002 $class_array[] = ( $type ) ? $type : ‘ ’ ; 

003 $class_array[] = ( $class ) ? $class : ‘ ’ ; 

004 $class_array = array_filter( $class_array ); 

005 $classes = implode( ‘ ‘, $class_array ); 



d Q Shortcode markup 

I When this shortcode is executed we want to 
make sure that it's using the correct formatted markup 
and CSS classes. We need to use a wrapping class 
alert-box. This is very important because we want to 
make sure that Foundation calls the Alert JavaScript 
plugin for us. This particular plugin is in fact handled in 
the 'foundation.alert.js'. 



001 $output = ‘<div class=“alert-box ‘ . $ 
classes . 

002 $output .= do_shortcode( $content ); 

003 $output .= ( ‘false’ 1= $close ) ? ‘<a 
class=“close” href=“”>×</a>’ : 

004 Soutput .= ‘</div>’; 

005 return $output; 

006 } 



Hook into WordPress 

I Before finishing off our shortcode we’re going 
to ensure that it has all been registered correctly, 
otherwise WordPress won’t know what to do with it. To 
do this we use the 'register shortcodes' function and 



the 'add shortcode' method. The first parameter defines 
the shortcode in the editor while the second points to 
the function that we created previously. 

001 function register_shortcodes() { 

002 add_shortcode (‘ alert ’ , ‘foundation_add_ 
alerts’); 

003 } 

004 add_action(‘init’ , ‘ register_shortcodes’) ; 

Shortcodes to use 

We can now use the following shortcodes in 
the editor to display alert boxes, which is a native 
component from the Foundation framework. All we have 
to do is pass in which type of alert box type we want 
displayed by selecting the attributes: success, secondary 
or alert. We can even choose what type of shape to use 
and whether we want a close off function. 

001 [alert type=”success” shape=” radius” 
close=”true”]This is a success message 
[/alert] 

002 [alert type=”secondary)” shape=” radius” 
close=”true”]This is a standard message 
[/alert] 

003 [alert type=”alert” shape=”round” close= 
”false”]This is an alert message[/alert] 

Alert boxes 

Without any CSS styling or JavaScript and just 
using the shortcodes we have set up, we can 
implement alert boxes wherever we like in our 
WordPress site. By simply using shortcodes we can 
easily convert many of the rich components from 
Foundation to be used easily throughout our site. 

Footer 

To finish up we’re just going to add in a footer 
navigation by using the WordPress WP list pages. Open 
up the 'footer.php' and just belowthe closing </section> 
tag, remove everything including the <footer> tag. 
Replace it with the following code, which will display a 
list of all pages on our site. 

001 <footer class=”main-footer”> 

002 <div class=”row” 

003 <ul> 

004 <?php wp_list_pages() ; ?> 

005 </ul> 

006 <?php do_action(‘foundationPress_ 

before_footer’); ?> 

007 <?php dynamic_sidebar(‘‘footer- 

widgets”); ?> 

008 <?php do_action(‘foundationPress_ 

after_footer’); ?> 

009 </div> 

010 </footer> 

Style the footer 

Finally, we’re just adding the final touches by 




Store all your shortcodes in 
a separate file 

In this tutorial our code for the WordPress 
shortcodes are placed in the 'functions.php'. 
While this is valid, to keep our 'functions.php' 
clean and easy to maintain it's good practice to 
copy all of the shortcodes into a separate file 
instead. The benefit of having this separate file is 
that it becomes more modular and, should you 
have lots of shortcodes, it won’t become 
cluttered in unnecessary code compared to 
being in the 'functions.php'. 

To follow FoundationPress standards we can 
copy all our shortcodes into a new file called 
'foundation-shortcodes.php'. Within the 
'functions.php' we can just reference this with: 



require_once(‘l 
shortcodes. php’ 



You could even store all of your shortcodes 
within a separate plugin. That way, in the event 
that you switch themes, they will always be 
available and working. 



styling up our footer. Through this tutorial we've taken 
the starter theme FoundationPress and quickly 
customised it as our own theme using a variety of 
Foundation's components and functionality. Using 
FoundationPress allowed us to focus on the front-end 
development and less on the actual backend efforts. 

001 .main-footer { 

002 padding: 10px 0; 

003 background-color: #9c9c9c; 

004 } 

005 .pagenav ul { 

006 margin: 10px 000; 

007 } 

008 .main-footer li { 

009 float: left; 

010 margin-right: 10px; 

011 list-style: none; 

012 } 
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Customise a 
Word Press 
theme 

THERE ARE PLENTYOE PRE-MADE THEMES THAT YOU CAN 
MAKE USE OE EOR YOUR WORDPRESS BLOG. WITH A LITTLE BIT 
OE WORK 'UNDER-TH E-HOOD' YOU CAN GIVE YOUR OWN BLOG 
A LOOK THAT DIEEERS EROMTHE REST OE THE CROWD 



The choices you make with 
regards to aesthetics will determine 
whether your users will want to delve 
further into your content 



TUTORIAL 

OBJECTIVE 

Leam some basic 
tweaks that can be 
applied to personaiise a 
WordPress theme 

TIME REQUIRED 

20 minutes 




THEMES ARE A key part of your 
WordPress blog, as they dictate how 
your website will appear to your 
visitors. The choices you make with 
regards to aesthetics and iayout wili determine 
whether your users wiii want to deive further 
into your content or avoid making a return trip 
in the future. WordPress has plenty of themes 
for you to choose from and you can also make 
your own customisations to really add that 
personal touch. Making such customisations 
does involve a certain amount of coding but 
even with a minimal amount of knowledge you 
can learn a few tricks to get you up and running. 
If you make the correct preparations you can 
also make edits without putting your installation 
at risk. This is done by creating a child theme 
that inherits the traits of a pre-existing parent 
theme. In this tutorial we show you how to do 
exactly that, customising the CSS for themes to 
create a look that you are hoping for rather than 
relying on the themes that are provided by 
WordPress. We also take you through setting up 
fonts for your theme, guide you trough 
hexidecimal colours, adding notes and borders 
to your work to make a cohesive theme that has 
that personalised touch. 




Create child theme 

Create a new folder on your local computer. 
Give it the same name as your current WordPress theme 
but add a marker after it The theme we've used in our 
example Is twentythirteen so we've named the folder 
'twentythirteen -child'. Open a text editor and create a file 
titled 'style.css' within this folder, within that file add the 
text above. Make sure to add the name of your own 
theme to the relevant lines. In this example, where we 
have used twentythirteen you will need to use your own 
selected theme name. 

Upload child folder 

The next step Is to upload your child folder to 



your WordPress installation. This can be done by using 
an FTP program to connect to your web host. We've 
used FileZilla in our example. Use your FTP program to 
browse to the /wp-content/themes folder and upload 
your newly created child theme folder. Alternatively, zip 
the folder and upload It by using the WordPress theme 
uploader. You can find it in Appearance>Themes>lnstall 
Themes>Upload. 

Open WordPress 
Dashboard 

In your web browser, log in to your WordPress 
Dashboard. On the left hand side of the screen, click on 
Appearance followed by Themes. Your newly added child 



theme should now be visible within your selection of 
themes. If you wish you can preview it to check that it 
has inherited the attributes of the parent theme. To make 
further edits you will need to activate the theme. 

Dashboard based 
customisation 

Depending on your chosen theme, you may have the 
option of making customisations via the WordPress 
Dashboard. This can control features such as the layout, 
the title, background images and so on. These are helpful 
for getting the main aspects of your site organised. What 
we're looking at however are more specific changes that 
can be made by adding code to the style.css file. 
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^ C Understanding CSS 
v/^commands 

Now we have a child theme installed we can customise 
it without disturbing the parent theme. This is done 
by adding extra lines of CSS code into the style.css file. 

On a basic level they work like the example above. 

The Item is the feature that you're editing. This is 
followed by a curly bracket and the Property which is the 
aspect of the item that is being changed. Value is what 
the new setting will be, ie a colour or font. Note the use of 
the colon and semi-colon, these are required as part of 
the coding. 

001 Item { Property: value; } 

^^Addingcode 

\^When it comes to adding new code it needs 
to be added after the ©import line. If you add 
commands before the ©import line, the alterations 
will not take effect. Working from the example in the 
previous step, the item that we are editing is Heading 
1 (known as HI). The property that we're changing is 
the text format (text-transform) and the value that we 



are applying is uppercase. When we apply this code 
it will force all of the text in Heading! to appear 
in uppercase. 

001 /* 

002 Theme Name: TwentyThirteen Child 

003 Description: my fabulous child theme 

004 Author: Lisa Sabin-Wilson 

005 Version: 1.0 

006 Template: twentythirteen 

007 */ 

008 Simport url(' . ,/twentythirteen/style.css'); 

009 hi { 

010 text-transform: uppercase; 

011 } 

^^View changes 

# If you wish you can edit the local style.css file 
on your computer and upload it again via FTP to your 
WordPress installation (overwriting the old file). 
Alternatively you can edit the file within the WordPress 
dashboard. Click on AppearancoEditor. This will open 
the stylesheet within your web browser. Once your edits 




Plugins such as 
Widgets on Pages make 
it possible for widget 
areas to dispiay within 
the content of a page 
or post by means of 
shortcodes that the 
user pastes into 
the text. 



have been made, click on Update File to finalise your 
changes and update your blog. 

^QSet up fonts 

Once you’ve mastered one command you can 
move on and start applying multiple commands. This is 
an example provided by WordPress that illustrates the 
many possibilities regarding fonts. We have set the body 
text to be either Arial. Helvetica or Sans Serif (depending 
on what fonts the end user has installed) with a size of 14 
pixels. Headings one and two have been set to two times 
and one and a half times larger than the body text 
respectively. Any strong text elements, such as widget 
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titles, will appear in italic and uppercase to draw extra 
attention to them. 

001 body { 

002 font-family: arial, helvetica, sans-serif; 

003 font-size: 14px; 

004 } 

005 hi { 

006 font-size: 2em; 

007 } 

008 h2 { 

009 font-size: l.Sem; 

010 } 

011 Strong { 

012 font-style: italic; 

013 text-transform: uppercase; 

014 } 

Add borders 

You can also add borders to particular elements 
of your page. Here we have added a dashed border 
to Heading Size 1. It will be 3 pixels wide at the top and 
bottom plus 10 pixels wide at either side. The border will 
also be black. It’s a good example of how you set up the 
item first then follow with curly brackets containing the 
specifics of what you want to edit 

001 hi { 

002 border-style: dashed; 

003 border-width: 3px; 



004 border-left-width: 10px; 

005 border-right-width: 10px; 

006 border-color: black; 

007 } 

Add notes 

Once you've got a few tweaks up and 
running you're going to find that it can be a bit easy 
to get lost in all that code. It’s worthwhile getting into 
the habits of leaving notes for yourself This is done 
by using /* and */ like in the example above. The idea 
is that if you come back to your code at a later you 
can quickly find the elements that you wish to 
work on. 

001 /* This is how you add notes*/ 

Developer Tools 

Web browsers such as Firefox and 
Chrome can do more than just search the web. They 
also now feature developer tools that allow you to 
inspect various elements of a web page. We’ll focus 
on Chrome in our example. Open your webpage, 
right-click on an element you wish to change and select 
Inspect Element. 

Viewing the code 

The bottom of the screen will now display 
two panels. On the left is the HTML elements with our 
selected item highlighted. On the right is the CSS code 



that is being used for this item. Scroll down this window 
to yiew the code that has been applied. Here we have 
located the code from earlier that has forced our header 
text to be all uppercase. 

Toggling edits 

Depending on whether a particular piece of 
code is active you may be able to toggle the code on or 
off. This is shown by a box that appears to the left of the 
particular line of code. As you click the toggle box the 
changes will appear in real-time. It’s a great tool for quickly 
seeing how small design changes can play out on your 
blog. More importantly whilst you’re working in the Dey 
Tool your actual website will not be altered. Only you can 
see the changes. 

Manual edits 

You can also manually change code by selecting 
a value and typing in a new entry. Here we are altering 
the colour of the website title. When it comes to colour 
you can enter a colour, RGB value or hexadecimal code. 
It’s more preferable to use a hexadecimal value as there is 
far more variety available. Here we have clicked the value 
and used the arrow keys to scroll through the code values 
until we have found a value that fits. 

Apply your edit 

Once you’ve found the correct setting you can 
then copy the code straight from the dev tool. Select the 
code beginning with the Item (in this case .site header 
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Hexadecimal 
colour codes 

We've briefly touched up 
hexadecimal colour codes In the 
main tutorial. In basic terms this is a 
six digit code where each colour 
relates to a different code. Using 
hexadecimal codes means that up to 
16,777,216 colours are available for 
you to use. There is a logic to the 
codes but thankfully there are also 
some great online tools to save you 
the hard work of figuring out the 
codes for yourself. Of particular note 
is http://colourco.de/ . It’s website 
that not only provides you with codes 
for colours but also suggest other 
colours that will compliment your 
initial colour selection. This is 
invaluable for creating a good look 
on your site. Simply drag your mouse 
pointer around the screen and 
colourco.de will display the codes for 
each corresponding colour. 
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Top tip 

To stop people 
seeing your 
developing blog, set it 
to private. From the 
Dashboard, click 
Settings>Reading and 
select ‘I would like my 
site to be private’, 



SOME TECHNICAL 
TORAGE STUFF 



DJ Paul Nelson 



.home link) and ending with the closing 
curly bracket and copy it. You can then paste 
this into your style.css file and save it The 
applied tweak will then be visible to your 
website visitors. 

^ ^Taking it further 

I \^So far you've gained a basic idea of 
how CSS works and how to apply it. There is 
a lot more to cover, much more than what we 
can fit in here. WordPress has links to some 
great online material to help you out. Such 
an example is www.htmldog.com/guides/ 
css/ which covers various aspects of HTML, 
Javascript and CSS. 



If you re creating 
and tweaking a blog 
you can also do so in 
an offline environment 
before you publish 
changes online. Try 
w w w.wa m pse rve r. 
com/en/ 



Some technical storage 
stuff 



I •> c • — *. — 



DJ PAUL NELSON 



SOME TECHNICAL 
STORAGE STUFF 



<top> 

• By selecting an element on the page the 
Dev Tool can take you straight to the CSS 
code that relates to it. From here the 
tweaking can begin 

<middle> 

• Here we have un-ticked the 'uppercase' 
command on the headings. Notice that the 
text on the webpage has also updated at 
the same time 

<bottom> 

• You can also click directly on a value and 
manually enter your chosen measurement. 
Again, the page will update in realtime 
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Convert a 
static site to 
Word Press 
with a child 
theme 

TRANSFORM A HTML SITE USING A CHILD OF THE NATIVE 
WORDPRESS TWENTY TWELVE THEME 



TUTORIAL 

OBJECTIVE 

Convert your HTML theme 
into a WordPress theme 

TIME REQUIRED 

2 hours 




THE POPULARITY OF WordPress has 
refused to abate over the last few years, 

with over 60 million websites worldwide 

“ - and around 25 per cent of new sites - 

choosing the free content management system as 
their foundation. Running your website with a CMS 
has obvious benefits, from ease of changes for site 
owners, to the wealth of extra functions available. But 
what can you do if you have an existing non-CMS site 
that you would like to use in the WordPress format - 
without changing the look of the site? Well, thankfully 
it's not as difficult as you may think to take an existing 
theme and replicate your site with it. 

WordPress comes with a selection of own 
out-of-the-box themes pre-installed, including Twenty 
Fifteen, which is the most recent. They offer a basic 
responsive framework and are solid, secure, and 
dependable themes which stand up to heavy editing. 

This exercise uses an older iteration of the theme. 
Twenty Twelve. Themes are updated by WordPress 
regularly, so to avoid all the changes being lost with 
each update, we'll be creating a child theme. Using 
child themes allows you to draw your files and styling 
from an existing theme while creating changes and 
making amendments in a separate sub-folder, giving 
you complete control. 



Back up your site 

Before doing anything else, take a backup of 
your existing site. In this case the site is called Cat Stuff, via 
FTP or control panel. This is good advice at any time, but 
you will also need to migrate many of the files, not least the 
images, to your new WordPress installation. 



Install WordPress 

Install WordPress where the site was and enter 
the details into the fields. Log in to your Dashboard and 
view the site by clicking on the site title in the top-left of the 
window. You’ll see it as it looks in the unedited Twenty 
Twelve theme. Now we need to set up our child theme. 

Make the child folder 

Grab all your WordPress files and navigate 
through them to the themes folder at wp-content>themes. 



You can see the folder for Twenty Twelve here. Create a 
new folder and name it after your website - in this instance 
we’ll call it Catstuff. This folder will contain all our child files 
and styles. 




Create new stylesheet 

Open a new CSS stylesheet and name it style, 
css. It’s important that you stick to this naming structure as 
this is what WordPress will look for. Save it to the child 
folder. Add the following, or equivalent, declaration to the 
top of the sheet. The template name must match exactly 
the folder name of the parent theme. 

001 Theme Name: Cat Stuff 

002 Description: Child theme for Twenty Twelve 

003 Author: Richard Lamb 

004 Template: twentytwelve 








Create a screenshot 

You can also create a screenshot of your old site, 
or whatever you want to use. to display in the Themes 
section of the Dashboard. Take your image (it should be 
around 600px x 450px) and save it as screenshotpng. 
Place it in the child folder and upload the whole thing to 
your live themes folder. Go to Appearance>Themes in the 
left-hand menu of your dashboard. 






OR Activate your theme 

Activate the new theme by clicking the Activate 
link, which you’ll be able to locate below the screenshot. 
You’ll see the screenshot move to the top. If you look at the 
site again, you’ll notice that nothing has changed, but we 
now have the ability to edit and change whatever we like 
and make the site identical to the original with the help of 
our child stylesheet. 
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Custom home page 

# Copy 'pagephp' from the original twentytwelve 
folder and paste it into the new child folder Rename it 
'home.php'. WordPress will automatically load this as your 
front page. Copy and paste 'header.php' but leave it with 
the same name. Remove the following code from ‘home, 
php’ - normally used to call the blog posts and sidebar - 
and replace with the code that follows. 

001 <?php while ( have_posts() ) : the_post(); 
?> 

002 <?php get_template_part( ‘content’, ‘page’ 
); ?> 

003 <?php comments_template( true ); ?> 

004 <?php endwhile; // end of the loop. ?> 

005 

006 <?php get_sidebar() ; ?> 

Start adding custom CSS 

Although there are a few admin options for 
customisation in the Twenty Twelve theme, using CSS gives 
us far greater control. Now we are writing new versions of 
CSS declarations, rather than changing the originals. This is 
where referring to both the original theme CSS and using 
browser developer tools to identify which CSS classes we 
need to amend is invaluable. 




Main body changes 

Twenty Twelve comes with chunky margins and 
padding which will need changing to replicate our site's 
edgeTo-edge design. Removing the body padding will 
leave us having to add content padding here and there to 
compensate, but it's not too much trouble. You can change 
the body colour (#333) in the CSS or in the customisation 
options for the theme. 

001 body .site { 

002 margin :0 auto; 

003 padding: 0px; 

004 } 

005 



Image 

To put our original cat header in place we need to 
take the header image from the original site (head.jpg) and 
place it in a new images folder, in our child theme. Place the 
following styles into the CSS sheet, overriding those of the 
original and calling our image as a background. Add the 
img value for responsive purposes. 

001 img { 

002 max-width: 100%; 

003 } 

004 .site-header { 

005 background: url(images/head. jpg); 

006 background-repeat: no- repeat; 

007 background-position:center; 

008 height: 300px; 

009 padding:0; 

010 } 

The logo 

There are two ways to remove the title and 
description, either by deleting the HI and H2 tags from the 
<hgroup> in 'header.php', or deleting the content in the 
admin and overriding the CSS. The former is easier. Delete 
the tags and add the logo image to the images folder, then 
place a logo div between the <hgroup> tags which calls the 
image, and add some CSS. 

001 <hgroup> 

002 <div id=”logo”ximg src=”<?php 



bloginfo( ‘ stylesheet_directory ’ ) ; ?>/images/ 
logo . png”/x/div> 

003 </hgroup> 

004 #logo { 

005 text-align: center; 

006 } 

Navigation 

The navigation currently sits halfway up the 
header image. We can fix that, but first we need to create 
some pages and assign a WordPress menu so we can see 
the elements we need to style (see In Detail). Once you 
have the menu assigned, you can apply the following styles 
wrapped in a media query so the mobile navigation can be 
addressed separately. 

001 Smedia screen and (min-width: 600px) { 

002 .main-navigation ul.nav-menu { 

003 border:none; 

004 background : rgba(203 , 205 ,15,0.3); 

005 margin-top: 124px; 

006 } 

007 .main-navigation li { 

008 margin :0 20px; 

009 } 

010 .main-navigation li a { 

011 font-family: Verdana, Geneva, sans-serif; 

012 color:#fff; 

013 font-size: 16px; 

014 text-transform: none; 
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MEOW 



<above> 

• The menu still needs work at mobile size. Place 
some changes in the max-width; 600px media query 



C9f Sfuf f 



Menu 




MEOW 



<above> 

• Reduce ‘#logo’ by giving it a width of around 80%, 
with a 10% margin left and right, in order to allow for 
more room 




C9f S'f of f 





<above> 

• Give '.main-navigation a’ #cbcdOf and no text- 
decoration, and '.main-navigation li' a 16pt font with 
lOpx line-height 



Changing 

‘site-content’ to ‘.front- 
content’ maintains the 
CSS for ‘.site-content’ 



015 line-height: 2.692308; 

016 } 

017 } 



Customise the content 

I Our page is set up to accommodate a sidebar, 
despite the fact that we have removed the code that calls it 
The best way around this - allowing for the introduction of 
the sidebar to other pages - is to make a slight change to 
the class name of our home page's main content. By 
changing '.site-content to 'trontcontent we maintain the 
CSS for '.site-content. 



001 <div id=”primary” class=”front-content”> 

002 <div id=”content” role=”main”> 

003 </div><! — #content — > 

004 </div><! — #primary — > 



l/i. slider 

I "t Download the plugin Meteor Slides through 
the admin, and install it Activate it and upload your 
slide images from the original site by clicking Slides> 
Add New. Go to Slides>Settings and set the base slide 
width and height. Then, create a slider div on your 
child 'home.php' and place the following inside it to call 
the slider. 



001 <div id=”primary” class=”front-content”> 

002 <div id=”content” role=”main”> 

003 <div id=”slider”x?php if ( function_ 
exists( ‘meteor_slideshow’ ) ) { meteor_ 
slideshowO; } ?x/div> 

004 </div><! — #content — > 

005 </div><! — #primary — > 

006 



^ C Home page content 

I The easiest thing to do would be to hard code 
the content into the 'home.php' file, replicating the 
original. However, that would leave it uneditable 
through the admin area, which is the main point of 
having a content management system. The ideal solution is 
to use an admin page for the content and have the 'home, 
php' load it. 

1 R Create the page 

I Click on Pages>Add New in the left-hand 
menu and call your new page 'Home Page Content'. 

The content for the three columns on the original 
home page were divided into three sections. Copy the 
HTML for those sections into the text editor, making sure 
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Top tip 

There is a difference in 
calling images for parent 
themes and child themes: 
<?php echo get_template_ 
directory_uri(); ?> for 
parents and <?php 
bloginfoCstylesheet 
directory’): ?> for child. 



that it is set to Text rather than Visuai. The Text tab aiiows 
HTML input 



001 <div class=”section”> 

002 <hr /> 

003 <hl>MEOW</hl> 

004 Sed quia consequuntur magni dolores eos 
qui ratione voluptatem sequi nesciunt. Neque 
porro quisquam est, qui dolorem ipsum quia 
dolor sit amet, consectetur, adipisci velit, 
sed quia non numquam eius modi tempora incidunt 
ut labors et dolore magnam aliquam quaerat 
voluptatem. 

005 </div> 

006 <div class=”section”> 

007 <hr /> 

008 <hl>PURR</hl> 

009 Sed ut perspiciatis unde omnis iste natus 
error sit voluptatem accusantium doloremque 
laudantium, totam rem aperiam, eaque ipsa quae 
ab illo inventors veritatis et quasi architects 
beatae vitae dicta sunt explicabo. Nemo enim 
ipsam voluptatem quia voluptas sit aspernatur 
aut edit aut fugit. 

010 </div> 

011 <div class=”section”> 

012 <hr /> 

013 <hl>REOW</hl> 

014 Ut enim ad minima veniam, quis nostrum 
exercitationem ullam corporis suscipit 

laboriosam, nisi ut aliquid ex ea commodi 
consequatur? Quis autem vel eum iure 
reprehenderit qui in ea voluptate velit esse 
quam nihil molestiae consequatur, vel ilium qui 
dolorem eum fugiat quo voluptas nulla pariatur? 

015 </div> 



^ ^ Call the content 

I # Now you’ll need a little PHP snippet to call 
the content for that particular page into the home 
page. Include the loop below, placed below the slider 
diy which will call the page by ID. So make sure you replace 
the "pagejd=26' with the ID number of your particular 
page. This can be found in the uri or on the page listing. 



Home content CSS 

If you click Publish, you’ll see that the sections are 
now stacked one above the other - they’re missing the CSS 
from the original site. Those were fixed widths and this site 
is now responsive so you’ll want to consider the necessary 
changes when importing the old styles. Some percentages 
in place of pixels and a media query will help that. 

001 section { 

002 float: left; 

003 width: 30%; 

004 padding:10px 1.666666%; 

005 text-align:center; 

006 font-size: 12px; 

007 margin-bottom:30px; 

008 } 

009 hr { 

010 display: block; 

011 height: Ipx; 

012 border: 0; 

013 border-top: Ipx solid #222; 

014 margin: lem 0; 

015 padding: 0; 

016 } 

017 Smedia screen and (max-width: 600px) { 

018 .section { 

019 float: left; 

020 width: 90%; 

021 padding: 10px 5%; 

022 text-align:center; 

023 font-size: 12px; 

024 margin-bottom: 30px; 

025 } 

026 } 

027 

HI Tag 

The three H1 section titles used a Google font, so 
you can bring that in now. Place the href in the ‘header.php’, 
in the <head> tag as you normally would. Don’t forget to 
include the styling from the original site, too. Also, you need 
to add some styling to ’.front-content’ to match the 
background colour of the original, 
slink href=’http://fonts.googleapis.com/css?family=Denk+ 
One’ rel=’stylesheet’ type=’text/css’> 

001 .section hi { 

002 font-family: 'DenkOne’, sans-serif; 

003 text-align:center; 

004 font-size: 35px; 

005 margin:20px 0; 

006 } 

007 .front-content { 

008 float: left; 

009 background :#ccc; 

010 width: 100%; 

011 } 

The Footer 

Copy ’footer.php’ from the Twenty Twelve folder 



and paste it into the child folder. Open it and remove the 
PHP snippet containing the Twenty Twelve credits, 
replacing it with the copyright notice of the original site. We 
can preserve the WordPress footer functionality if required 
at a later date. Now add the new styles. Replace the code 
below with the code that follows immediately after. 

001 <div class=”site-info”> 

002 <?php do_action( ‘twentytwelve_credits’ ); 

?><a href=”<?php echo esc_url( ( ‘http:// 

wordpress.org/’, ‘twentytwelve’ ) ); ?>” 
title=”<?php esc_attr_e( ‘Semantic Personal 
Publishing Platform’ , ‘twentytwelve’ ); 
?>”><?php printf( ( ‘Proudly powered by %s’, 

003 ‘twentytwelve’ ), ‘WordPress’ ); ?></a> 

004 </divx! — .site-info — > 

001 <div class=”site-info”> 

002 <h2>Copyright© 2013 Cat Stuff</h2> 

003 </divx! — .site-info — > 

004 CSS 

005 footer[role=”contentinfo”] { 

006 background: #000; 

007 border:none; 

008 margin-top:0; 

009 padding: 10px 0; 

010 } 

011 footer h2 { 

012 font-family: Verdana, Geneva, sans-serif; 

013 text-align:center; 

014 color:#cbcd0f ; 

015 font-size: 13px; 

016 font-weight: normal; 

Inner pages 

Copy ’page.php’ and the folder ’page-templates’ 
into your child. All inner pages can now be created 
using the internal pages made earlier, either with HTML 
in the Text tab or through the Visual tab, and use these 
templates. If you want to keep the sidebar removed, select 
’full-width page’ under Templates in the page editor. 

Removing comments 

If you want to remove the comments 
functionality from your pages, leaving them matching the 
originals, you need to either delete or comment out the 
relevant PHP snippet in both ’page.php’ and ’full-width.php’. 
There is also a little CSS snippet you can place at the top of 
each page in the editor to hide the page title. 

001 Hide the Page Title <style> 

002 ,entry-title{display:none;} 

003 </style> 

004 Hide Comment Functions 

Change the below with the following: 

001 <?php comments_template( ‘’, true ); ?> 

001 <?php //comments_template( ’’, true ); ?> 
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Create a 
mobile- 
friendly site 

WITH MORE AND MORE USERS ACCESSING THE INTERNET ON 
MOBILE DEVICES IT IS MORE IMPORTANTTHAN EVER TO 
ENSURE THAT YOUR SITE CAN STILL WORK PROPERLY WHEN 
VIEWED ON A SMALLER SCREEN 



Taking the time to optimise your 
website will not only improve the 
experience of your audience but also 
help ensure they keep returning 



TUTORIAL 

OBJECTIVE 

Make adjustments to your 
theme so it can adapt to the 
screen sizes web browsers 
on mobile devices 

TIME REQUIRED 

30 minutes 




THE WAY WE access the internet 
has changed dramatically over the 
last few years. Previously, your 
WordPress blog would have most 
likely been accessed by desktop browsers. 

These days you are more likely to find that an 
increasing number of your viewers are 
accessing your blog via a mobile device or 
tablet. To that extent it is important to make sure 
that your website is optimised to work on such 
platforms. Taking the time to do so will not only 
improve the experience of your audience but 
also help ensure that they return to your blog in 
the future. Some themes (known as responsive 
themes) can adapt the content accordingly 
when a mobile browser is detected. Alternatively 
there are plugins and code modifications that 
can be applied to adjust your theme accordingly. 




Use responsive themes 

One of the easiest ways to make your site 
mobile friendly is to install a responsive WordPress 
theme. Some of these are free while others come at a 
cost. These can make your website mobile friendly 
without the need for getting under the hood and 
messing around with code. In the Writr theme that we're 
using we can go into the customisation screen and 
toggle previews between desktop, tablet and 
mobile devices. 

Installs plugin 

If your theme does not include a mobile 



version there are always plugins that can be installed 
to configure your website. Popular examples include 
the WordPress Mobile Pack and WPTouch. Open the 
plugins menu from Dashboard, click on Add New 
and try the search term 'Mobile'. Extra plugins 
such as these are only available on seIPWordPress 
hosted blogs. 

Using WPTouch 

With WPTouch installed you can create a 
mobile friendly theme within minutes with no need 
to know how to use CSS code. The settings for 
WPTouch allow you to apply colours, select how your 



posts look and add social networking links. There 
is also a Pro version that opens up more themes 
and extensions. 

Install a theme 

Many themes are now equipped with a 
responsive design which saves you the hassle of 
setting things up yourself If you've already made 
your own theme however you can still apply some 
CSS to make your theme more responsive. To 
demonstrate this we will use the older Twenty 
Ten theme which is non-responsive. Most likely 
you will need to install it first Click on Appearance 
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Top tip 

If you’re unfamiliar 
with coding, there 
are plugins that 
exist to make your 
theme mobile 
adaptable. Including 
WPTouch. 



<left> 

• When viewed on a mobile 
device your content will adapt to 
the screeh size, videos will 
appear in line and menus can 
retract to save space 

<top right> 

• More and more themes are 
capable of beihg responsive 
straight out of the box. In this 
example we cah see how our 
blog will appear in varying 
screen sizes 

<bottom right> 

• Plugins such as WPTouch can 
turn your blog into a mobile 
friendly site with no need to 
learn any new code 



followed by Add New. Type Twenty Ten Into the 
search box and click Install from the relevant 
search result 



Recreate child theme 

If this is going to be theme that you wish 
to keep it might be worth considering installing a 
child theme. That way if your current theme receives 
an update it won't overwrite the changes we are 
making over the next few steps. Steps for this can 



001 @media only screen and (max-width: 640px) 

{} 



within the curly brackets at the end of the code from 
the previous step. Here we are setting the main frame 
size to 400px and the container layer to match the 
main frame size. These settings only take effect once 
the screen size drops below 640px. To check if the 



23 44 
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munkayplustyp«writer worapr«M.com 



MUNKEY PLUS TYPEWRITER 



STUFF MY BSAIN TH NKS BY aMUNKEYCOP 



WHAT ARE THE 
STEREOPHONICS 
THINKING ABOUT? 



Nothing new going on in this 
post, (this video has been 
around since last December) 
I just wanted to add this 
video as its a lovely 53 
seconds of YouTubery. 



WHA'c ARE "H- S »<EO.. 



- 












So 













be found in the previous tutorial for customising 



code is working you can try resizing your desktop 



5) and the image will be hidden on devices using a 



a theme. 



browser window. 



smaller screen. 



Screen width limit 

Add this code to the very bottom of your 
style.CSS file. This is a conditional styling code which 
will instruct the browser to alter the display the website 
if the screen size or less than or equal to 640px. 

We're using 640px as an arbitrary example, in truth 
there are varying sizes for all kinds of smartphones 
these days. Within the curly brackets we will insert 
the instructions for the browser to follow for screen sizes 
below 640px. 



001 #access .menu- 

002 header, dimenu, icolophon, #branding, #main 
ftwrapper, #site-title {width: 400px} 

#container {width: 100%;} 

Remove header image 

If your theme has a header image you may 
wish to remove it altogether on smaller web browsers. 
Add this line to the code in your style.css file (again, 
somewhere between those two curly brackets from Step 



001 #branding img { 

002 display: none; 

003 } 

Resize header image 

If you don't want to hide the header image 
on your blog you can choose to resize it instead. Add 
the code above instead of the code from Step 7. In this 
example the code has set the image size to 100% of the 
main frame (as in Step 6). 
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001 #branding img { 

002 width: 100% 

003 } 

Manage blog description 

Your blog description may take up screen 
space that you’d rather use for actual content. Add 
this code and the description will be removed on 
smaller screen sizes. Alternatively you can also 
reposition the description into a more optimal position. 
To do this you will need to replace the displayinone; 
line from the example above with another 
command. For example, to position it to the left 
add float:left; 

001 #site-description{ 

002 displayinone; 

003 } 

Setting more aspects 

The code above refers to the navigation bar 
size and the width of the content container. As per the 
previous steps we're not setting a specific size for these 
two items. Instead we are instructing it to be the same 
size as the main frame (as per Step 8). 

001 #access{ 

002 width: 100%; 

003 } 

004 #content{ 



005 width: 100%; 

006 } 

Adjust text placement 

You can make adjustments to how your blog 
content is positioned on the display. In the example 
above we have moved the margin of the post content 
layer 13px to the left. It may not sound like much but 
when it comes to working on a smaller screen every little 
bit of space helps. 

001 .hentryi 

002 margin-left: 13px; 

003 } 

Tidying up 

With the previous piece of code we have 
found that our content and sidebar have clashed over 
the top of each other. This is when deciding what to 
keep and what to rearrange comes into play. The 
first section from the code above removes the sidebar 
completely. The lower section resizes the footer section 
of your blog. 

001 #primary{ 

002 displayinone;} 

003 <hlockquote> 

004 #footer{ 

005 width: 100%; 

006 } 



Powered by Wordpress 

The Twenty Ten theme also features a 'powered 
by WordPress’ tagline that appears along the bottom 
of the display. The code above moves it to the left of 
the screen. If you want you can swap everything in the 
brackets with displayinone; this will remove the banner 
line altogether. 

001 #site-generator { 

002 float: left; 

003 margin-top: 5px; 

004 } 

Resize lower border 

The Twenty Ten theme has a black border line 
that runs across the bottom of the page. We will need 
to make sure that it does not overrun the edge of the 
screen. The code above will take care of this problem by 
resizing it to the same 100% value as used before. 

001 #colophon { 

002 width: 100%; 

003 } 

Job done 

If you’ve made it this far well donel Your theme 
can now adapt to a smaller screen size. It may not be as 
comprehensive as a fully responsive theme but at least 
you now have a backup plan for browsers running on 
smaller screen sizes. 
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Part of getting your mobile based 
theme right is seeing what it will look 
like on other platforms. This can be 
tricky if you don't have access to 
devices such as tabiets. Fortunateiy 
there are online tools that can 
simulate the experience. Such 
examples include mobiletest.me or 
responsinator.com. With these tools 
you simply enter your WordPress 
URL into the website and select a 
device. You can aiso browse within 
the simuiators to see how your iinks 
and embedded content wiii work. 
There are aiso simiiar toois 
embedded into Fi refox and Chrome 
which can simuiate smaiier screen 
devices. With Firefox hoid down 
CTRL, SHiFT and M to activate the 
feature. With Chrome press F12 and 
seiect Emuiation from the dev tooi 
menu (avaiiabiiity wiii depend on 
whether it has been activated in dev 
tooi settings). 



: Bear in mind 

the slower data 
connections of 
mobile users 



If you’re planning to 
optimise your website 
for mobile users, bear in 
mind the slower data 
connections they may 
be using. Try to avoid 
overloading pages. 

Compress images 
before uploading 
them. 



tracks, 12 Months 






Top tip 

Part of optimising your 
site for mobile is 
streamiining the content 
itself. Users viewing on a 
mobile screen may be 
inclined to skip through 
iong posts. Try using 
bold headers and 
paragraph breaks. 



12 Tracks, 12 Months 
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March Round-up 
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<top> 

• You will need to upload your child theme 
to your WordPress installation as per the 
steps in our previous tutoriai 

<middle> 

• You can check to see if your theme is 
becoming responsive by reducing your 
browser window. On the ieft we can see 
our theme resizing, on the right it is not 

<bottom> 

• The sidebar is crashing into our main 
content. We either need to move it to the 
bottom of the screen or hide it aitogether 
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TRANSFORM HTML TO 

WORDPRESS 







We show you how to avoid the potential 
pitfalls when transforming a HTML 
mockup into a custom WordPress theme 

THERE ARE MANY ways to go about designing a website in general, and a WordPress 
theme in particular. A design idea can spark from something you've seen, or perhaps come 
together in your mind based on your dient's specifications. Either way, you’ll get an idea, you'll 
■=■ draw it out - in your mind or using some sort of tool - you'll probably do a mockup or three, 

and then start developing. Of course it usually isn’t that simple. All those pesky clients have their own 
ideas and want input, even though you know that you know best. 

Some people think you should design in the browser, and while perhaps that might not be a universal 
truth to subscribe to, it can be useful to employ it at times - perhaps completely avoiding Photoshop all 
together. Even among all the technology we have these days, it can be incredibly useful to do sketches 
on paper before moving on to doing elements in something like Sketch. After that you can start cranking 
out the markup to see how well it works in a web browser. 

That’s what this is all about. You've got an idea, a sketch, possibly a mockup, and then you write the 
HTML and CSS to test everything out. Perhaps you’ll even use your HTML version as the client mockup, 
making sure that the client actually sees what they’ll get, or you do it as a part of your process. No 
matter what the methods used are, should you employ the HTML mockup technigue rather than just 
jumping directly into coding a theme based on any PSD files, you’ll find that there is a lot of time to be 
saved - and several wins to be gained as well. 

Considering this, this feature will show how to create a WordPress theme. There’s an idea, 
there are sketches, there are thoughts and suggestions regarding mockups, traditional as well 
as HTML based. Then there’s taking an HTML mockup and creating a WordPress theme 
out of it. Perhaps you’ve never done this before or you’re a seasoned veteran who used 
I to and sell themes based on your PSD mockups. Either way, there might be 

I Y, something in this methodology to help you improve your process. 



\ 
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Failing to plan is planning to fail 



To kick off a project, get a design idea, some sketches, and then a quick mockup. This wiil have aii the first phase bases covered 



Get some ideas 

Today's publishing landscape looks very different to how it did before blogs entered 
the market Blogs are more than personal diaries, and the concept is used on just 
about every modern publication. With this, the possibility of doing a professional 
publication powered by the best of the blogs has opened a lot of doors, and has given 
us great sites such as The Loop (www.loopinsight.com) and SplatF (www.splatf.com). 
These are modern publications using the best of the blogs, in a modern way. 

This project will borrow heavily from this approach, but not forget about the 
publishing landscape's past. In other words, the WordPress theme that you'll end up 
with will rely on typography and content first, but it won't be limited to personal nor 
professional blogging as such. Not that any theme truly is of course, but themes can 
surely be more or less suitable for one or the other. 

Start sketching 

This project started with some freehand sketches on paper, as it can be more suited 
to small and straightforward projects as this one. The absence of eraser tools and 
layers can be a nuisance, but it can also be an asset since everything you do is 
committed to paper. That fact might help you focus, but as always your mileage 
will vary. 

The design is simple. There will be a strong yet thin frame that connects to the 
various headings by underlining them. The typography is the visual element that 
carries this design, but since WordPress supports custom backgrounds, and there is 
the outer frame to part the content area with whatever background is chosen, we'll 
take that into account as well. This means that we're being limited to near black border 



Benefits of planning ahead 

# Clear for the client 

Sometimes the client has a hard time visualising how a design will turn out HTML 
mockups put this to rest by inviting the client to click around in the web browser. 

# Get a head start 

When the client approves the mockup, you'll have a head start on the 
development since a considerable bulk of markup and the stylesheet is ready. That 
is. if you write the code yourself and don't rely on exports from mockup software. 

# Mobile makes sense 

Looking at a traditional mockup and trying to understand how the design will 
work on a mobile device is hard for most clients. Mobile design is driven by actual 
interaction, so that's what you'll want to show off. With a HTML mockup, you can. 

# HTML conveys visual effects 

If your design employs any kind of effect, transition, or something flashy that 
makes it pop just like the client wanted, there's no way to convey that in an image. 

# It’s honest 

Your client might love your Photoshop mockup. but when they look at it on their 
Windows XP laptop, everything just looks dirty and jagged, if you show them a 
HTML mockup. they'll see the real deal instead. 



colours, since we won't know what sort of background image that'll be used, but that's 
a fair compromise. It does limit the use of colours on the site, especially concerning 
links, but the idea is to keep it muted and classy anyway. Besides, changing colours 
with CSS in a child theme is simple enough, so it's almost a moot point. 

Design mockups 

For a client project it would be prudent to not only show off (and clear) sketches like 
these, but also design mockups. The beauty of doing an HTML version first is that 
it can be your mockup, and as a result, a lot more true than any Photoshop image 
you might be presenting to your clients. With HTML, you can get the correct font 
rendering, transitional effects work as intended, the mockup will be viewed in a web 
browser, and viewing it on mobile is a breeze. 

Larger projects with a lot of different templates and design elements might benefit 
from having a mixture of traditional 
mockups, as well as ones done in 
HTML. You could benefit from using 
software that supports exporting to 
HTML, which might mean you'll get 
a near-finished HTML mockup to 
work with. Do remember however, 
that exported HTML from software 
can feature some truly awful markup, 
so don't always count on using that 
code, it is often best to simply write 
the HTML mockup code yourself 
making sure that, should the design 
be cleared, you'll have proper markup 
that you can use for when the real 
development gets going. 



Top tip 



Be sure to clear the type 
of mockups you’ll deliver 
to your client beforehand. 
Some clients expect a 
certain type of delivery, 
and you don’t want to 
get off on the 
wrong foot. 




<above> These simple sketches show the desigh in both a desktop and mobile state. 
This will be the first phase in the process. Remember to make some notes. 
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Mobile first 

Clear content 



The content templates on mobile will actually share 
a lot of their desktop counterparts, which is one of 
the advantages of the cleaner, more content-focused 
design seen around the web today. The site title will be 
positioned up top, small but clear enough, and then we’ll 
give the page title more room with large clear type, and 
centred. There'll be a line connecting to the sides, but 
we'll cut the avatar to save in http requests and space. 
The actual content is one column on the desktop site 
as well, and the only things that differ between these 
two are the size of the font and the various scaling of 
images. Floating an image on the right-hand side won’t 
look particularly good on mobile if the image covers 
almost all the screen, so we’ll size it down accordingly. 
Other than that, it’s pretty straightforward. 

The right-hand column is cut out altogether on the 
mobile version so we won’t have to worry about that 



Begin developing the bare bones of the project 
by exploring the mobile platform first 



Flowever, there might be a menu that needs to be 
handled, so add a specific mobile-only menu to the 
mobile version, right at the very top. 

White space 

Archive pages (pages listing several pieces of content), 
have less in common with the desktop. Centre the titles, 
cut the avatar, and rely on a simple line across the page. 
Providing ample white space between the posts will 
help avoid any confusion. 

The front page’s top widget area needs dealing 
with. We’ll keep the background but the widgets will be 
stacked rather than side by side. This is something that 
needs considering for a lot of designs, and especially for 
the devices between smartphones and tablets/desktop 
- to stack or to scale down? For our purposes, we’ll stack 
them as it mingles well with the content. 
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Why go mobile first? 

By designing the mobile version first, you’ll get to the heart of things, and then you can add to 
the design as you scale up in screen size. This is also a good exercise to get to the gist of your 
project, as only the most important things will make sense on mobile. 



On the desktop 

Scaling up content 

Scaling up from the mobile version is easy when you’ve decided to go 
with a single-column design. Creating a ^ite where the content is easy 
to read and with ample room for images is more important than adding 
clutter with a right-hand column that won’t add anything important on 
single pages. The side-column is of more use when you’re searching lor^ 
something, which is why it sticks around on archive pages. ^ 

The content page on desktop and tablet borrows all the features from 
the mobile version, but with some additional carefully chosen elements. 
There’s gn avatar, for example, which adds a bit of personality to the site, 
and we’re connecting with the 'line under title’ concept by mingling the 
avatar with the line that connects to the outer frame. Aside from this, 
everything should be relatively straightforward. 

The logo and site title are smaller on archives, which gives more room 
to the la'rge strong page title. We’ll use a desktop-only top menu here, 
should the site owner have such needs. 



n 



r Top tip 

Horizontal menus tend 
to scale poorly, so many 
sites rely on the 
hamburger menu. Having 
multiple menus is the 
easiest way, hiding them 
V with media queries. J 



L 



Archive 



The archive pages on desktop and tablets have an additional column 
on the right-hand side. This column is only present on archive pages, 
which hopefully means that the end user will employ it accordingly, 
by adding features that help the visitor find whatever it is that they 
looking for. Search fields, latest posts, menus and whatnot pre 
apprcfpriate, Twitter and Facebook boxes might be okay, but the 
general rule still applies: Do not add clutter. 

The post listings differ a bit as well. The titles are underlined and 
connected to the outer frame, and we’ll implement the author avatar 
in listings too. For this site we’ll let the site owner decide where the 
posts should be cut, by inserting a ‘Read More’ link using WordPress’s 
built-in feature for this - but depending on your needs, an excerpt 
might Just be a bit more prudent. 

Finally, the fr&nt page has got a dedicated widget area position at 
the top, made with two widgets in mind. 
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STAGE 2: THE TRANSFORMATION 



Key Word Press components 



A WordPress theme is made up of 
individual parts that all have a place 



• The menu 

WordPress has a handy built-in menu 
interface that we'll make good use 
of. As always, you should use the 
default features whenever possible 
because it makes the theme a lot 
more futureproof. Since horizontal 
menus are a nuisance on mobile, 
we'll have two menus: one for 
desktop and one for mobile, showing 
the appropriate one via CSS. In this 
case we won't do a hamburger or 
dropdown menu for mobile, but a 
site with a lot of sections would likely 
need something like that 



• The site title 

Some sites will find it perfectly 
reasonable to have a text-only title (and 
a tagline), but most will probably want 
to have a logo of some kind. To please 
both camps, do a check for a header 
image (a standard WordPress feature 
that can be activated in the theme) 
and if there is one It can be outputted 
with that, and no text title or tagline. 

If no header image is uploaded, then 
just display the site title and tagline as 
entered in the WordPress settings. 



• The post flow 

While the HTML mockup depicts the 
front page, the method of displaying 
the river of posts will be the same in 
all archive pages, including categories, 
tags and search results. It's a pretty 
basic flow, chronological with the 
newest addition up top, which we'll 
output using a standard loop. For this 
design there is no support for post 
formats (such as asides, dedicated 
video posts, and so on), but it would 
be a small feat to add them and make 
them stand out. thanks to the strong 
titles for the standard posts. 
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• Front page widgets 

The front page features a widget area 
below the header, which of course 
can feature both text and a logo. This 
area is meant to host two widgets, but 
it can display more should the user 
require it. When viewing the site on the 
desktop, the widgets sit side by side, 
but on lower resolutions they'll stack 
up instead, taking up the full width. 

This is the only important thing worth 
remembering when populating this 
area with widgets. In the HTML mockup 
there are only two text blocks here, but 
the widgets could be used for anything 
- perhaps a cover and blurb pointing to 
your latest book? 



Use the 

default features 
when possible to 
make themes 
futureproof 



• The side column 

The side column on the right-hand side 
will only be present on archive pages. 
Much like the front-page widget area, 
this consists of widgets only. Unlike the 
front page widgets, the side column 
won't be visible on smaller devices, 
meaning that you shouldn't rely on it 
for important things. To keep things 
interesting, and possibly problematic 
due to floating issues, the sidebar is 
actually floating to the right, with the 
posts wrapping around it. You can 
fetch it using the standard get sidebarO 
template tag. 
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Essential elements 

The stylesheet, functions file, header and footer are key inclusions 



Adding style 

The stylesheet, or style.css, is one of the mandatory files 
in a WordPress theme. It's not so different from regular 
stylesheets but for the heading, which consists of every 
detail needed for WordPress to understand that this is 
in fact a theme, and not just some random collection of 
files. If you want, it is possible to have several stylesheets 
and load them as needed, but as always this should be 
carefully considered since it means additional requests 
and potentially longer loading times. 

This theme is called Words Of Importance, because 
hopefully that's what it'll be used for when released 

Get functional 

The functions.php file is the place where you add 
support for various things in your theme, as well as add 
any other theme-related functions you might want. 
Common things that functions.php should be used for 
include activating support for custom header images 
and backgrounds, registering menus, and of course 
declaring the widget areas. We need to do all that, and 
other than the widget areas we'll do it by adding the 
necessary code to a theme setup function. 

001 function woi_setup() { 

002 // Add RSS feed links to <head> 

003 add_theme_support( ‘automatic-feed-links’ 

004 ); 

005 // Add custom background support 

006 add_custom_background() ; 

007 add_theme_support( ‘custom-header’, 



to the public. This means we've gotten started, with a 
folder called woi, and a copy of our style.css file, with the 
necessary theme declaration added up top. 

001 /* 

002 Theme Name: Words Of Importance 

003 Theme URI: http://tdh.me/wordpress/ 

004 Description: A clean theme meant for 
online publishing, what else? 

005 Version: 1.0 

006 Author: Thord Daniel Hedengren 

007 Author URI: http://tdh.me 

008 */ 



$args ) ; 

008 // Register menus 

009 register_nav_menu( ‘desktop-menu’, ( 

‘Desktop Menu’, ‘woi’ ) ); 

010 register_nav_menu( ‘mobile-menu’, ( 

‘Mobile Menu’, ‘woi’ ) ); 

011 } 

012 add_action( ‘ af ter_setup_theme ’ , ‘woi_ 
setup’ ); 

Theme setup is added to the after setup theme action, 
whereas the same for our two widget areas (the front- 
page widgets and the side-column widgets) will be 
added to the widgetsjnit action. Get the full code from 
the website. 

001 function woi_widgets_init() { 

002 // Front page widgets 

003 register_sidebar( array( 






t ^ 

Side column 

The sidebar.php file 

There is a great template tag called get sidebarO, 
which also includes sidebar.php for you. This 
template tag will go into the archive templates 
(including search), which are the only ones 
displaying the side column. 

The sidebar.php file consists only of the 
minimal markup needed for outputting the 
widgets in the side-column widget area, which 
was registered in functions.php. You can do that 
with dynamic sidebarO, and by passing the ID of 
the widget area wanted, which is side-column, 
again as registered in functions.php. This means 
that the sidebar.php is pretty straightforward 
to say the least. Note the ID for the section tag, 
which is hidden on smaller resolutions, and not 
displaying any sidebar no matter what. 

001 <section id=”sidebar”> 

002 <ul> 

003 <?php dynamic_sidebar( ‘side 

-column’ ); ?> 

004 </ul> 

005 </section><! — #sidebar ends — > 



Top tip 



Make sure that 



whatever feature you 



add using functions.php 



isn t crucial when switching 



themes. If your feature 



should carry across 



themes, then it should be 



in a plugin instead. 



Header and footer 



Including header.php and footer.php 



Breaking out the header and footer from the HTML 
mockup is mostly a matter of simply copying and 
pasting it over. The only thing you absolutely must 
remember to have if you want your theme to function 
properly in all instances, is the wp headO template 
tag just before the closing head tag. There are some 
things that usually need to be swapped out, such as 
every place where the title of the page appears (be it 
the site title or just the page title) should be dynamic 
tor example. Another aspect that is usually involved is 
the menu, including the one created in functions.php. 
as well as custom headers. 



While there are a number of things you'll have to 
change (and should add) when creating the header, 
php file from the HTML mockup, two things stand out 
more than others. First, there's the title, as in the title 
tag title, which should change depending on where on 
the site you are. 

Next, there's the site title/header image feature. 

A header image needs uploading, which means 
having to add it to the woi setupO function created 
in functions.php. The code will add the support for 
custom header images, allow them to be just about 
any size, and remove the site title output when used. 



This only adds the support for custom headers, 
you'll need to actually output it In yourheader. 
php file as well. Since the site should work and look 
good without a header image as well, a check to see 
whether there is one or not needs to be done, and 
then act upon that. 

Compared to all this, the footer.php template is 
almost ridiculously simple. The only thing you truly 
need, except your already present markup, is the 
wp footerO tag, that wraps up WordPress. much as 
wp headO kicked It off. Put the wp footerO template 
tag just before the closing body tag and you're done. 
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Posts and pages 

Displaying the actuai content is a key element for most sites. 
With WordPress, this generaiiy invoives working across the 
various posts and pages 



Posts and pages have a lot in common, and although most themes will have separate 
templates for these, they rarely differ all that much. First of all, as with every template 
that deals with the things between the header and footer, you need to include said 
header and footer. This is done with the get headerO and get footerC) template tags. 
Second, you need the loop to output the appropriate content. This would be different 
posts or pages - just one, depending on the situation. Here the templates for posts 
and pages are almost identical, consisting of the loop, and then an Inclusion of another 
template using get template partO, and calling for content-single.php (for posts) 
and content-page.php (for pages). These templates consist the actual output of the 
content but the loop is what's telling WordPress to go look for content. 

The page.php template is used for pages, and single.php for posts. The former is 
reprinted here. Remember that there is no side column in single posts and pages in 
this design, so the get sidebarO template tag is absent and not including the sidebar. 

The loop is used whenever content should be outputted, which means that you'll 
see this again when you get to the archives. 

The actual output is in the contentX.php files. This is much like the HTML markup 
you wrote for your mockup, but with the dynamic parts swapped out for various 
template tags. This includes the post/page title, categories and tags if such are to be 
used and displayed, the author, and so on - as well as the actual content of course. 
Most important will be the titleO and the contentO, for title and content, but adding 
post classO to your wrapping element (an article tag in our case) is also important if 
you want some default CSS classes added. For reference, see the content-single.php 
code, which is an adaptation of the HTML mockup created. 
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<abOVe> A simple post consisting of the ever-important lorem ipsum copy - note how 
easily the text is lifted through imagery 



001 <article id=”post-<?php the_ID(); ?>” <?php post_class() ; ?» 

002 <header class=”ehtry-header”> 

003 <p class=”postmeta postmeta-single”> 

004 <span class=”postmeta-date”x?php the_date(); ?></spah> • 
<span class=”postmeta-section”x?php the_category( ‘ ‘ ?x/span> 

005 </p> 




What’s the 
difference between 
posts and pages? 



Posts and pages aren't so different 
from each other. They are both 
post types, and you can add more 
of those yourself using code or a 
plug-in. The standard posts and 
pages differ from each other by the 
way that they can be used. Posts are 
meant to hold continued updates, 
sometimes sorted into categories 



and/or tags (which in turn are 
taxonomies, and yes, you can add 
your own). Pages on the other hand, 
are meant as more static things 
that won't show up in any category 
archive. In short, posts are the 
updates and news on your site, while 
pages are the About Us and Contact 
information parts. 



006 <hl class=”entry-title-single”> 

007 <?php the_title(); ?> 

008 </hl> 

009 <div class=”avatar-single”x?php echo get_avatar( get_the_author_ 
meta( ‘user_email’ ), $size = ‘96’ ); ?x/div> 

010 </header> 

011 <section class=”entry-content”> 

012 <?php the_content() ; ?> 

013 <?php wp_link_pages( array( ‘before’ => ‘<div class=”page- 

link”>’ . ( ‘Pages:’, ‘woi’ ), ‘after’ => ‘</div>’ ) ); ?> 

014 </section> 

015 </article> 

All of these tags that are used to output titles, dates and whatnot are integral to the site 
and at the heart of WordPress, because these are the ones that manage to actually 
deliver the all-important content to your site visitors. There’s a template tag for just 
about anything you’ll want to output so if you’re a bit uncertain, just have a quick 
search for it in the WordPress Codex (codex.wordpress.org). 



Make a comment 

Comments are worthy of a specific mention. There used to be a time when every 
site should have a comment form, but today with the widespread popularity of social 
media, it’s obviously not that clear. A lot of popular publications, mostly niche ones, 
are cutting the comment area all together in favour of communication solely through 
social media. However, there’s nothing that says that you can’t do both. 

If that’s not enough, fewer sites rely on the builtin comment functionality in 
WordPress, instead relying on external services such as Disqus and Facebook 
comments that provide great functionality and are easy to use. These are all easy 
to implement as well, especially if you include the comments templateO tag in your 
theme, because plug-ins can add something like Disqus through that 

Besides adding the comments templateO tag to your templates for single posts 
and possibly pages, you can either create a comments.php template file with the 
necessary markup for your comments, or just use a function in functions.php. For 
your copy-paste needs, and since you most likely will end up using Disqus anyway, 
the function for doing so can be found in the full code. Naturally, you’ll need to add 
the appropriate stylings to your stylesheet to make this look any good, and you may 
want to consider queueing the stock comment JavaScript as well. You can find more 
information on the queueing scripts in the WordPress codex: bit.ly/9seNB2. 
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STAGE 3: THE FINISHED ARTICLE 



Front Page 



Welcome to the site, with front page-only widgets, 
controlled by the home.php template file 
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<above> Add an 
image, change the 
background if you like, 
and get publishing - it's 
as simple as that 




Here the front page is basically the archive template, 
with an added widget area positioned at the top. 
Through CSS, the site title, assuming you stick with 
just the text version, is larger on the front page. This is 
thanks to that the body classO tag, which gives body 
proper CSS classes - for example, the front page is 
conveniently named 'home'. 

The final step for this theme would be to find out 
where all the kinks are and adjust them, add all the 
necessary classes for image alignment and such, as well 
as run it through the Theme Check plug-in (wordpress. 
org/plugins/theme-check). There are some things to 



tweak and to take care of, but those are a bit outside the 
scope of taking a simple HTML mockup and converting 
it into a WordPress theme. One thing you should notice 
is that there are a lot of little details to take care of to 
make your WordPress theme complete, something that 
is easy to forget about. Remember to make sure you 
leave time to address these little touches as well, before 
leaving a quote to your client. 

If after reading this feature you are interested in 
following the development for the Words Of Importance 
theme, then be sure to check in on tdh.me/wordpress 
for links to the most recently updated version. 



Where next? 



The HTML mockup is now a WordPress theme, ready 

to use on just about any self-hosted WordPress install. Now what? 



Like most themes, there are things to do. This particular 
theme would do well to receive a favicon and an 
Apple touch icon, and before you launch anything you 
should obviously have web analytics software in place. 
Then there's the obvious development points, such 
as featured images for the posts, individual styling for 



plug-ins you use, some page templates for your specific 
needs, and so on. Maybe you just don't like some minor 
things, which could be sorted out with a child theme, or 
maybe you just want to fork the theme. 

There's always things to do, change and develop with 
Word Press themes, for some mysterious reason. Enjoy. 



Archives 

Taking control of post listings pertaining 
to specific categories or tags 

Archives in WordPress usually means category, 
tag. or even date-based archives. There are 
dedicated template files for all of these, should 
you want precise control over tag archives (tag. 
php) or category archives (category.php), but 
chances are you think all these should look and 
feel the same. Then you can use archive.php 
instead, which is the fallback for all kinds 
of archives. 

Basically, the archive.php template file consists 
of a heading (the visitor needs to know where 
they are on the site after all), what kind of archive 
it is that they are viewing, and a loop that outputs 
the archive contents as defined In the read 
settings in WordPress. 

Search 

The search.php template is pretty handy if you 
want to have a little more control of the search 
result. It's basically an archive when the search 
returns true, but when it's not. you need to tell the 
visitor something. The easiest way to do this is 
to add an 'if clause to your loop, and then being 
able to complement it with an 'else' that's only 
true when there's nothing to output. Also, note 
the echo get search queryO part, that will tell the 
visitor what they searched for. 

404 

The 404 template is one of the simplest, and 
hardest, ones to create. It's a template called 404. 
php. and it's usually almost identical to a page.php 
template. The difference is, the message delivered 
when someone gets to a 404 Page Not Found 
page on the site is a static one. that (usually) 
resides in the 404.php template file. 

In the case of this theme, this file was created 
by merging page.php and content-page.php 
swapping out all the dynamic titles to a hard- 
coded message. 

Fallback 

A required template file in WordPress themes is 
index.php. The idea is that this is the theme's last 
line of defence, the template file that'll be used 
if no other file fits. In other words, if the theme 
doesn't have a category.php file, and WordPress 
wants to render a category archive, then the 
system will look for others. First it'll check for 
archive.php, the fallback for archives, then it’ll go 
back to index.php, the final fallback. Treat index, 
php that way, and make sure it returns something. 
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Plugins 

I Extend your blog’s functions 



100 Pro guide to Plugins 

Get the inside scoop on using plugins 
from industry experts 

106 Edit widgets and plugins 

Change the plugins and widgets you are 
using on your site 

110 Protect your blog 
from spam 

stop spam comments from making their 
way onto your blog wth Aklsmet 

114 Increase your site visits 
with SEO 

Use Search Engine Optimisation to get 
more hits for your site 

118 Add a social author box 

Give your site authors a friendly face with 
a social author box 

120 Build a WordPress 
slideshow 

Showcase your pictures in style with 
a slideshow 

124 Schedule your blog posts 

Set a timer for your blog posts with the 
Editorial Calendar to view your flow 



€€ There are 
thousands of 
plugins available 
to be installed onto 
your theme and 
implemented 
within your site ff 
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Pro guide to 

Word Press 
plugins 



100 WordPress Genius Guide 



DISCOVER SOME OF THE BEST 
ADD-ONS. AS SELECTED BY 
INDUSTRY EXPERTS 



Word Press 
Genius Guide ^ 




Take content management to the 
next level 



Advanced Custom Fields by Elliot 
Condon 

advancedcustomfields.com 

The Advanced Custom Fields plugin seriously beefs up 
your WordPress edit screens. With fields ranging from 
simple text and image inputs, a support network of 
users and a documentation site that makes even the 
most advanced task effortless, like the go-to Swiss Army 
knife of WordPress page management. 

Once installed, how to utilise the power of Advanced 
Custom Fields becomes apparent after setting up your 
first field group. Telling the field group which page 
template you want it to appear on, or which custom 
post type you would like it to appear within, is easy. And 
although Advanced Custom Fields is built specifically 
for developers to create next-level WordPress websites 
for their clients, the usability of the fields in WordPress 
CMS feel as familiar as the existing WordPress user 
interface. This will ensure webmasters have an easy 
time using the newly added content boxes. 

Including Advanced Custom Fields functions in your 
template files couldn't be simpler. Create a group, add 
some fields, then add functions such as <?php the_ 
fieldCsecond wysiwyg'); ?> to your template files 
wherever you want the new content to appear. Style the 
resulting functions by wrapping them in the same CSS 
classes that you have created within your website's 
stylesheet - it really is mind-blowingly easy. 



A great example for using the Advanced Custom 
Fields plugin would be to create a manually 
manageable 'Related Articles' or 'Related Content' area 
within one of your template files. You'd create this using 
the Post Object field, which displays a selectable list of 
posts from all, or specific post types that your site has 
in place. This gives webmasters additional options when 
creating pages in order to cross-promote articles, 
products or just about any type of content. When called 
upon, WordPress' default functions can be introduced 
into the code of the Post Object, such as get_the_post_ 
thumbnail or the title to make the list of posts more 
visually appealing to site visitors. You can also include 
any of the Advanced Custom Fields field data that has 
been added to the edit screen of a post type template. 

Advanced Custom Fields will open up a whole new 
corridor of opportunity for your WordPress builds, one 
that your clients and development team will want to 
explore again and again. 



ALTERNATIVE PLUGIN 

Simple Fields 

simple-fields.com 

Simple Fields is a slightly less in-depth solution to 
custom fields. The plugin offers an array of options to 
extend the WordPress edit screens functionality with 
a simple, easy-to-use interface. 



How to choose 
the right plugin 

m Do your research 

Unfortunately, WordPress plugins don't 
always play nice with each other. When selecting a 
plugin, you should always check the WordPress 
plugin directory for information such as 
compatibility issues, last updated, number of active 
installs and user ratings. 

Set up a testing 
v/^ environment 

If you are using a particularly high number of 
plugins on your site, or are simply concerned by the 
lack of support for a particular plugin, it makes 
perfect sense to set up a duplicate of your site and 
then just test the hell out of it. This is particularly 
useful when you are adding plugins to a live client 
site because it can save you from any potential 
banana skins. 

Send a support ticket 

Well, why not? Sending a support ticket to 
the plugin developer could give you an idea of just 
how long the developer takes to respond to any 
potential future issues. If you don't get a response, 
or if the response you do get seems a little lax, it 
might be better to leave it alone because it could 
indicate that support isn't there. 
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Add multi-language support 






Back up now 

SOMETIMES THE WORST happens, and you just 
won't have time to fix it. Adding too many 
plugins can turn your WordPress build into a 
potential game of Jenga, and sometimes the 
white screen of death will rear its ugly head. 

Adding a plugin? Back it up first. Updating the 
theme? Back it up first. Updating WordPress to 
the iatest version? Back it up first. Always, 
always, always back up your WordPress site 
before changing anything to do with your site’s 
functionality, database, theme or base files. 

The Duplicator plugin, found at wordpress. 
org/plugins/duplicator, is a rapid-fire way to 
generate a quick launching backup of ail 
WordPress files and your database, in a 
downloadable, neatly compressed ZIP file. The 
plugins' very own easy-to-use interface and 
download facility allow you to create a zipped 
up 'Archive' copy of your entire site and 
database as well as an installer.php file that is 
uploaded to your hosting account’s root folder, 
along with the zipped-up back-up copy, that 
installs your website to its previous location 
without any fuss or hassle. 

The Duplicator plugin is also great for 
migrating your site to a new hosting account or 
even to a new domain. When using the installer, 
php file to run the installation, you can specify a 
new URL for your site. Now, once you’ve 
deployed the backup to the new hosting 
account, all URLs found within the site will be 
automatically updated to the new URL, meaning 
all of the database data has been edited without 
having to go anywhere near phpMyAdmin. 
What’s more, it then gives you a handy list of 
things to check once the installation is 
successfully complete. 

If you take nothing else from this article, this 
plugin should become your go-to tool for 
backing up your WordPress site. 



iiUpdating 
WordPress to the latest 
version? Always back 
it up first 



WordPress Multi Language 

wpml.org 

WordPress Multi Language is an easy-to-use translation 
management plugin built by a translation company. The 
plugin boasts some incredible features that doesn't just 
include easy management of languages, it’s an all-in 
collection of language management tools built to work 
within a single WordPress install. Everything from 
menus to footer credits can be translated Into the 
language that you want with ease with built-in support 
for custom themes and even other plugins. 

The plugin comes with a great set-up wizard that 
takes you through the whole Initial setup. Once you 
have selected your base language, adding new 
languages can be done at the click of a button, select 



from over 40 initial languages with the added ability to 
add your own custom language variants. An out-of-the- 
box language picker can be added to your header or 
sidebar via the plugins settings area, or you can choose 
to create your own and add it to your theme’s template 
files where you want the picker to appear. 

You also have the choice of how to display your 
multilingual content, such as using a different domain 
per language, for example myblog.co.uk. myblog.de or 
myblog.fr and so on, by using subdomains, like en. 
myblog.com, de.myblog.com or fr.myblog.com, or by 
using the default of keeping the multiple languages 
within the same domain. 

Once you've selected your chosen languages, you 
can then simply navigate to your page's edit screen 




Elliot Condon 



@elliotcondonl 



I he developer behind the 
Advanced Custom Fields set 
of plugins, Elliot Condon is 
also a user interface 
specialist. Follow Elliot's 
social media and never 
stray far from the latest ACF 
features sneak-peeks, 
updates, news, server 
downtimes and fixes. 



a 



Chrjs Spooner 



@chrisspoonerJ 



A self-proclaimed "maker of 
pretty pictures', Chris 
Spooner offers a great 
insight into the life of a 
freelancer and gives away 
many time-saving tips for 
the world of graphic and 
web design. Perfect for 
seasoned designers and 
developers alike. 




Speckyboy is an online 
magazine run by Paul 
Andrew, who is based in 
Scotland. Speckyboy is a 
superb resource for web 
design and development 
tips, tricks and general 
inspiration, from CSS to 
fonts and everything else 
that's in-between. 




RWD has everything you 
need to know about 
responsive web 
development. Great for 
polishing up your 
techniques or looking for 
new ways to customise a 
plugin to ensure it fits in 
with the mobile world. 




The perfect Word Press 
Twitter account. It's an 
Aladdin's cave of all kinds of 
web goodies. From 
resources to tutorials, 
plugins and themes to... well, 
just about anything. All of 
this is of course all in one 
place too. Make sure you 
give them a follow. 
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where you will find WPML has added some extra 
settings to your list of pages. As well as displaying 
published pages and drafts, you will also be able to see 
how many pages you have amongst your selected 
languages, which is a great way to see a quick overview 
of how many of your master languages pages have 
already been converted into your desired language. 
WPML also adds a great visual helper in the form of 
country flag images when you click into the posts or 
pages menu within the backend, and from there you 
can add content for each of your chosen languages as 
you probably would do for any other page or post. 

WPML offers a unique way for you to manage your 
translation team, with the ability to turn WordPress 
users into 'translators'. These translators can then be 
assigned specific pages and posts to translate and a 
handy overview of all translations and translators can 
be easily viewed. Here you can see the status of each 
translation assigned to a specific translator - the whole 
management process is as streamlined as it gets. 

WPML also offers a vast amount of support for 
commerce sites using WooCommerce and this includes 
adding translation options for your products, related 
products, sales, promotions, cart, checkout and even 
confirmation emails. 

If you're having some trouble generating your 
translations, WPML has the perfect answer in the form 
of an optional connection to a paid-for translation 
service that is built right Into the plugin. From the 
translation dashboard, you can send content for 
translation to your chosen languages and, when 
complete, it'll appear right back in your edit pages 
ready to be published straight onto your site. 






ALTERNATIVE PLUGIN 

qTranslate 

qianqin.de/qtranslate 

QTranslate is another multilanguage WordPress 
plugin. With translations all kept in the same edit page 
it can create more clunky-looking edit screens, but it 
has many features of a paid-for plugin. 




Create custom post types inside 
WordPress quickly 



Custom Post Type Ul 

bit.iy/leCYMSP 

Custom Post Type Ul offers a great way to create 
custom post types and taxonomies from inside the 
WordPress CMS admin area. Say you need a custom 
post type called 'Movies', and you need to add some 
taxonomies for actors, year, rating and genre - well this 
can all be done in seconds with CPT Ul. Lots of options 
are offered up for customisation of post types, 
including: custom slug, hierarchical (true/false) and 
customisation of the display labels within the WordPress 
backend. The CPT Ul plugin can also be used to import 
and export existing custom post types, making backing 



up post types fail-safe. Code created by CPT Ul can also 
be copied into your functions.php file for sound and 
stable creation of custom post types when releasing a 
theme to market. 



ALTERNATIVE PLUGIN 

Types 

wordpress.org/plugins/types 

Types is a great way to manage custom post types 
and taxonomies with the benefit of handling basic 
custom fields too. Types lets you add extra image 
fields and text areas within your custom post types. 



Chris Woodley 

Lead developer 

Forme Creative 

formecreative.co.uk 

HERE ARE FIVE plugins I simply could not do 
without. These plugins have become as important to 
my daily workflow as Illustrator, Photoshop and 
Dreamweaver and are an integral part of my 
Wordpress backend landscape. 

Essential Grids 

essential.themepunch.com 

Highly customisable grid builder for displaying posts 
with uber modern templates. Great for creating 
portfolios, product sliders, galleries and more. 



MemberPress 

memberpress.com 

Need to create a membership site with paid-for content 
and integrated payment gateways? Then MemberPress 
is the plugin that you need. It is ideal for services selling 
digital downloads. 

TablePress 

tabiepress.org 

Creating tables in WordPress is not simple. It involves 
adding custom code and is time-consuming. Who wants 
to do that? This is a free plugin that enables users to 
create and manage tables easily and quickly. A table can 
include different types of data and there is even the 
option to add formulae. 



WordPress SEO 

yoast.com/wordpress/piugins 

The only SEO tools you will need that comes with a 
traffic light scoring system. This plugin has a host of 
extremely useful features including content analysis 
functionality, assistance in writing better content, the 
option to automatically generate XML sitemaps and 
remove code bloat. 

Contact Form 7 

contactform7.com 

This is the hassle-free option for creating simple 
contact forms for file upload. It's a flexible and 
powerful plugin that is easy to use. Create a form, pick 
options and copy the shortcode to a post. 
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<inset> The new 

MPLSystems website 
uses the Slider 
Revolution plugin for Its 
home page slider, with 
a second fullscreen 
slider optimised for 
mobile view 









Get responsive- 
ready sliders 

Slider Revolution 

revolution.themepunch.com 

The Slider Revolution plugin gives you an ocean of 
customisation options for website sliders. With options 
like fullscreen display, responsive-ready (out-of-the-box) 
transition effects and custom animations, you'll never 
see the same transition twice. 

A unique feature of the Slider Revolution plugin is its 
'Slide Template' option. The slides can then be easily 
created on the fly by using information found within 
posts or custom post types and presented in a prebuilt 
or custom-made template. 

Slider Revolution supports YouTube and Vimeo video 
content and image-based content within the same slide. 
JQuery transitions, multiple layers, Google Fonts, 
custom CSS and many more great features have helped 
make Slider Revolution the most popular slider plugin 
on Envato as well as being extremely popular among 
theme developers. 

With its application-like interface it does take some 
getting used to - you wouldn't want to hand this plugin 
over to a less-than tech savvy client. However, things 
like the plugin's drag-and-drop caption placement 
functionality and the slide duplication feature mean that 
once you have finally settled on a layout, creating new 
slides is a breeze. 
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ALTERNAT VE PLUG N 



WooSlider 

bit.ly/lltYDAV 



Empower fipid 
workers with end- 
to-end field 
service 
management 



WooSlider is a simple and straightforward alternative 
to Slider Revolution. WooSlider offers a slimmed- 
down set of functionality with the added benefit of 
Instagram slides and a carousei slideshow option. 
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Explore these must-know 
plugins & resources 




PLUGIN 



BuddyPress 

buddypress.org 

BuddyPress is the ultimate social network plugin for WordPress. With groups, private 
messaging, activity streams and notifications - to mention just some of the great 
features this plugin offers - you really don't need any other social network plugin in 
order to get up and running, for any type of subject, for any number of members. 




PLUGIN 



RESOURCE 



W3 Total Cache 

bit.ly/1K16aUr 

Everybody wants a faster and more 
efficient WordPress install. Why? Because 
it engages more visitors and of course 
Google likes it as well. A faster site eguals 
a better ranking. Ever since Google's 
recent algorithm upgrade speed has 
become a very important factor in 
getting a good ranking. The W3 Total 
Cache is one of the most widely used 
speed and performance WordPress 
plugins. W3 Total Cache is a complete 
framework that improves site 
performance by up to ten times by 
combining a series of minifying tasks 
and caching processes that dramatically 
improve the overall user experience. In 
addition it also offers transparent content 
delivery network (CDN) integration. 



Template Tag 
Reference Guide 

bit.ly/10QFFW9 

This site, produced by DBS Interactive, a 
US-based digital agency, is a 
comprehensive reference guide for 
WordPress template tags listed in an 
easy-to-follow format. What's included in 
its guide? Author tags, bookmark tags, 
category tags, comment tags, date & 
time tags, Include tags, post tags and 
much more. The beauty of the site is that 
each tag is displayed inside a collapsible 
panel. All you need to do is click the 
desired tag and a host of information 
appears. This will give you a brief 
overview of the tag, the code in action 
and what each element of the code 
means. If you need to, simply copy and 
paste the code and modify accordingly. 



® © 



PLUGIN 

WP Maintenance Mode 

bit.ly/lzFgcFIT 

This is a simple, yet amazingly effective 
WordPress plugin. WP Maintenance 
Mode is perfect for new sites not yet 
launched with its timer count-down 
feature and coming-soon splash page. 
It's also perfect for instances when you 
are working on a live site if you don't 
want your visitors to see your half- 
finished masterpiece. 



PLUGIN 

Max Mega Menu 

maxmegamenu.com 

Max Mega Menu is a ready-made mega 
menu replacement for your WordPress 
theme. Just drop it in and you're good to 
go. It uses a simple column system in 
order to help create user-friendly and 
easy-to-navigate mega menus. With easy 
CSS editing you can use this plugin and 
customise it to complement or match 
any brand or colour scheme. 




PLUGIN 



RESOURCE 



WooCommerce Lynda.com 

bit.ly/1rUkc7M lynda.com 



Possibly the best-known WordPress 
plugin, its power matches that of 
WordPress itself It's ecommerce out of 
the box, giving developers and store 
owners total control over their online 
store. With over 29 per cent of market 
share, WooCommerce is now the most 
popular ecommerce platform. 



From Adobe Certified Experts to 
world-renowned coding gurus, lynda. 
com is the type of online video tutorial 
resource where the knowledge of and 
teachings from the contributors is 
second to none. The information found 
within it can be trusted to be accurate, 
up to date and reliable. 




PLUGIN 



RESOURCE 



WP Smush 

bit.ly/IDcZmpB 



WordPress.org 

wordpress.org 



WP Smush is a superpower image 
optimising tool for your site. Scan and 
reduce your image file sizes upon 
upload, reduce load times, keep those 
high-quality visuals and make search 
engines love your site even more. WP 
Smush is a worthy inclusion for each and 
every WordPress website that you end 
up building. 



Perhaps a little obvious, but constantly 
overlooked, WordPress.org is where the 
developers responsible for bringing us 
WordPress go to 'hang out'. You can 
learn about every function, find out 
about the most popular themes and get 
involved yourself by contributing 
towards the WP core or by joining the 
support team. 
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Edit your 
widgets & 
plugins 

WIDGETS AND PLUGINS ARE GREAT EXTRA EEATURES TO ADD 
TO YOUR SITE. UNEORTUNATELY,THEY MAY NOT ALWAYS LIT 
THE AESTHETIGS OE YOUR DESIGN. THAT'S WHERE A LITTLE 
TWEAKING GAN HELP 

€€ Widgets play a useful role within 
your website. They can be used to 
add a search function, list recent 
posts and display your categories f i 



TUTORIAL 

OBJECTIVE 

Make edits to widgets and 
plugins that feature on your 
WordPressbIog 

TIME REQUIRED 

40 minutes 




WIDGETS CAN PLAY a useful role 
within your website and they can be 
easiiy applied to your biog via the 
WordPress Dashboard. They can be 
used to add a search function, list recent posts 
and display your categories. Many themes tend 
to use the same styling rules for the widgets 
within a given section. If you have a specific look 
to your website you may wish to make the 
widgets a bit more customised. To achieve this 
you can edit the style.css file within your 
WordPress installation and have it change the 
appearance of your widgets. 

It's also possible to edit the plugins that you 
have installed. Depending on the edits you are 
making, this is a process that should not be 
taken lightly. If you are not careful you could 
destabilise the security of the installed plugin. 




m Select a widget 

In order to edit a widget we will need 
to decide upon a widget to edit Aside from selecting 
the widget we will also need to find out the name 
of the widget within the CSS code so we know how 
to refer to it in our own lines of code. An easy way 
to do this is by opening a browser such as Firefox, 
Chrome or Safari and using the develop tools to 
track down the name that we require on the 
internet This is done by right clicking on the location 
you want to inspect and selecting the relevant 
Developer option. 



Locate information 

Here we are looking to modify the text within 
the prologue section of our website. We need to find the 
specific parts of the webpage code that relates to this 
section. In this case, the text that resides within widgets 
are given a specific ID (usually 'text-' followed by a number). 
In our case it is #text-2 so we need to apply that 
reference number within our code. When it comes to 
the examples in the following steps you will need to 
substitute text-2 with your own reference number, or 
else the edits that you make won't apply to your 
desired widget 



Create the code 

Above is the code that will make the 
adjustments to the text in the prologue box. We've 
set our target, in this case it is #text-2 and the changes 
are within the curly brackets. In this case it will change 
the colour of the text to green and display all of the text 
in bold. 

001 #text-2 { 

002 color: #580948; 

003 font-weight: bold; 

004 } 
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Top tip 



Now we know what changes we are making 
we need to add them to the Style.css file of our child 
theme. Above is how the entire section of text should 
look within the file (although the upper section relating 
to the theme will contain your own specific theme 
details). Note that the changes to the text have been 
added below the ©import line. Either we can edit the 
file locally and upload it yia FTP or open Appearance> 
Editor from the WordPress Dashboard and add the 
code below the ©import line. 

001 /* 

002 Theme Name: Child Theme 

003 Theme URI: http://mysite.com/ 

004 Description: This is my custom child 
theme. 

005 Author: My Name 

006 'Author URI: http://mysite.com/ 

007 Template: twentyten 

008 'Version: 1.0 

009 */ 

010 0import url(' . ,/twentyten/style.css'); 



011 #text-2 { 

012 color: #580948; 

013 font-weight: bold; 

014 } 

AC Check the difference 

By opening our blog in another web 
browser we can see that the font has indeed 
changed colour and style. Everything else about the 
widgets stays the same as per the theme. So now we 
know how to make an edit to the widget. From here it's 
simply a matter of deciding on what else we would like 
to do. 

AC Add a border 

In the code above we have removed the 
green font and bold characteristics. In its place we have 
inserted a border command. This will generate a border 
around the widget that is 3px in thickness. The solid 
command will create a border consisting of a solid line 
(alternatives include dotted, dashed, groove, ridge and 
more). The final part, the #000000, refers to the colour. 
In this case, black. 




This almost goes without 
saying but it’s always worth 
bringing up. Seeing as we’re 
tinkering with code it’s always 
worth keeping a back up of 
what you’ve changed or edited 
You’ll never know when you 
may need to take a 
step back. 



001 #text-2 { 

002 border: 3px solid #000000; 

003 } 

A^ Change background 
U/ colour 

Here we have used the background colour 
command to change the widget background. In this 
example it now a light purple colour. It's a good 
example of how you can apply a widget but still make it 
blend with the design of your blog. You can also use 
normal colour terms such as purple rather than 
hexadecimal yalues. 
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001 #text-2 { 

002 background-color: #b0c4de; 

003 } 

Add background image 

Rather than just using a colour you can also 
choose to insert a background image via a uri. Bear in 
mind that larger images may have an adverse effect on 
your website load times. You’ll also want to make sure 
that your text Is still easy to read when Imposed over 
your chosen Image. Images can also be repeated If they 
are being spread over a larger area. In the example 
above the background-repeat function is repeating the 
image in a horizontal fashion. 

001 #text-2 { 

002 background-image: url("insert weblink 
here") ; 

003 background-repeat: repeat-x; 

004 } 

Alter image positioning 

with adding an Image Into a widget you may 
find that the wrong part of the Image has been applied. 
With the example above we have added an extra line of 
code. Here we have Instructed the Image to be displayed 
inside the widget from the bottom right corner. We can 
see the changes once we save the code within the editor 
and refresh our view of the original webpage. 



001 #text-2 { 

002 background-image: url(''https:// 

dl . dropboxusercontent . com/u/6726157/DEMO. jpg") ; 

003 background-position: bottom right; 

004 } 

Formatting text 

Using the code above we have made some 
basic amendments to the text within the widget. We’ve 
changed the colour to teal, and the text is now also 
centred. We have all transformed all of the text so it 
appears in uppercase. These are very basic changes 
but it's minor customisations such as these that can add 
to the whole layout of a blog. Also available but not 
shown here is a text-indent tweak that can specify the 
indentation on a first line of text (ie text-ident: 60px:). 

001 #text-2 { 

002 color: teal; 

003 text-align: center; 

004 text-transform: uppercase; 

005 } 

Add text shadowing 

An extra line has been added to the code 
from Step 9. It has added an extra layer of shadowing 
to the text. It contains four values regarding 
positioning, shadow thickness and colour. The first 
value is horizontal placement: positive values place it 



more to the left and negative values more to the 
right. The second value Is vertical placement: 
positive values place the shadow lower down 
whilst negative numbers move it higher up. The third 
value is the blur distance: the higher the number the 
stronger the blur effect The final value is the colour of 
the shadow. 

001 #text-2 { 

002 color: teal; 

003 text-align: center; 

004 text-transform: uppercase; 

005 text-shadow: 2px 2px 5px teal; 

006 } 

Adding extra touches 

At this point our widget just needs some 
final touches. The first lines are to do with padding. 
These will insert 5px worth of space on each side of 
the text column. This will stop the text from making 
contact with the border on each side. The final line 
border-radius is a CCS3 command. It’s a quick and easy 
way of adding rounded edges to your border. The 
higher the number the more pronounced the curved 
corners will be. 



001 


padding-right: 


5px; 


002 


padding-left: 


5px; 


003 


border-radius: 


10px; 
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csss codes 

The shadow command ahd rounded 
border used in Steps 10 and 11 
respectively is actually a CSS3 
command (as opposed to a CSS 
command). CSS3 is the latest standard 
for CSS, it's backwards compatible 
with earlier versions of CSS and can be 
applied within your code. It includes 
some great new functionality which 
would have previously taken a lot 
more work to implement. Beyond the 
commands we've applied here there 
are also commands for animating 
content, adding gradient backgrounds 
(instead of using images) and 
transforming elements. 

Whilst these new tools are great to 
use, the CCS3 specification is still in 
development by W3C (The World Wide 
Web Consortium). Although many of 
the CSS3 properties have been 
implemented in modern browsers, 
users of anything older may find that 
their browsers are not capable of 
applying the code. For more 
information on CSS3 see www. 
w3schools.com/css/css3_intro.asp 




Bringing it together 

Here is our final result where we have combined 
the last few steps. We've added an extra instruction at the 
top regarding what preferred fonts to use. Just below this 
are instructions to add a little space (ie padding) to each 
side of the column of text This will stop the text from 
touching the border on either side. There's also a little 
padding at the top to centre the text vertically. We’ve also 
chosen to add a background colour as a backup to the 
background image, just in case it fails to load. Lastly, we 
have also removed the prologue title through the 
WordPress Dashboard. 

001 #text-2 { 

002 font-family: Arial, Helvetica, sans-serif; 

003 color: white; 

004 padding-right: 5px; 

005 padding-left: 5px; 

006 padding-top: 15px; 

007 text-align: center; 

008 font-weight: bold; 



009 text-transform: uppercase; 

010 text-shadow: 4px 4px 10px black; 

011 border: 2px solid #000000; 

012 border-radius: 10px; 

013 background-color: #b0c4de; 

014 background-image: url("https: // 

dl . dropboxusercontent . com/u/6726157/14328387394 
_950b6ef36b_b.jpg") ; 

015 background-position: top left; 

016 } 

Editing plugins 

The WordPress Dashboard has a plugin editor 
which is located within Plugins>Editor. and works as a 
simple text editor. The top right of the display has a 
drop down menu where you can select the plugin to 
edit The resulting code will appear in the main window. 
Bear in mind that any edits to this section are lost 
whenever the plugin is updated. To that extent It’s not 
always an advised option to directly alter the core files 
due to the security implications involved. 
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Plugins 






Protect 
your blog 

from spam 

SET UP AKISMETTO HELP PREVENT UNWELCOME SPAM 
COMMENTS EROM TAKING UP RESIDENCE ON YOUR BLOG 



•• Spam comments are engineered 
to generate mouse clicks not only to 
locations away from your blog but to 
potential online hazards 



TUTORIAL 

OBJECTIVE 

Prevent spam comments 
from making their presence 

TIME REQUIRED 

15 minutes 




GETTING YOUR NEW blog out Into 
the big wide world is exciting. 

Unfortunately you'll need to protect 
yourself from the more unscrupulous 
elements of the internet, namely spam. 

If your blog is equipped with a comments 
section you may find that it will start to swell in 
size thanks to spam bots sending replies to your 
blog posts. Of course, these aren't the type of 
comments you are looking for, and they don't 
particularly add to the content of your blog. 
These replies are engineered to generate mouse 
clicks to not only to locations away from your 
blog but also to potential online hazards. This 
can be as much a problem for little known blogs 
as well as the more commonly known online 
locations. Eyen the biggest websites, such as 
news and entertainment websites, have to deal 
with spambots. 

To keep these pesky spam pirates off your 
site, an essential add-on to your blog is Akismet. 
This tool will block spam comments before they 
even become visible. It works by checking your 
incoming comments against the Askimet Web 
Service. Depending on what it finds it will either 
pass the comment or contain it in a spam folder 
for you to review. This way, almost no spam will 
be able to come through without being spotted. 
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m Download the plugin 

First off you will need to install the Akismet 
plugin if it is not already displayed within your list of 
plugins. Click on the Plugins tab on the Dashboard 
followed by Add New. Enter Akismet into the search box 
and select Search Plugins. The Akismet plugin should 
appear at the top of your search results. Select Install 
now to add It to your plugin collection. 

f\^ Activating the plugin 

Activating the plugin is a simple as select the 
Activate link underneath the title for the plugin. In order 
for the plugin to work properly you will need to obtain 
an Akismet API key. Click on the link in the plugin 
description titled Sign Up For An Akismet API Key. 

Your API key 

You will be taken to the Akismet website from 
which you can obtain your API key. Select the service 



that is most applicable to you (most likely the Personal 
option). You'll be asked to complete some minimal 
contact information and also set a donation level to 
donate money to the developers. Note that for personal 
accounts donations are not mandatory. 

r\/. API key delivered 

Your API key should now be emailed to the 
email address you supplied in the previous step. Copy 
this and go back to your WordPress Dashboard. Open 
the Plugin tab and select Installed Plugins. Paste your 
API Key into the corresponding box on this page. You 
can also tag extra options relating to how incoming 
spam is handled. 




05 



Blocking hyperlinks 
in comments 



You can also add additional controls on any incoming 
comments to your blog. From the WordPress 



Top tip 

You can always 
avoid spam by 
removing the 
comment section via 
Settings>Discussion 
and un-tick ‘Allow 
people to post 
comments on 
new articles’. 



Dashboard click Settings followed by Discussion. You 
can dictate whether credentials (such as an email 
address) are reguired in order to leave a comment. 
There is also an option to hold back any comments that 
contain more than one hyperlink. A common approach 
of spam is to feature a notable number of links in order 
to drive traffic away from your site. 
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€€ Spam commenters are getting smarter; as a 
result the comment you receive could fool you 
into thinking you have an inquisitive reader fl 



Adding filter words 

Within the discussion section you can aiso 
add your own keywords that you feei should be 
scanned for within any incoming comments. Any posts 
contain these words can be either added to the 
moderation queue before pubiication or immediateiy 
marked as spam. Bear in mind that any partial matches 
are also removed so blacklisting the word 'bum' will 
block comments including words such as album, 
bumper and so on. 

Close comments 

Within the Discussion settings section is an 
option to close comments on older posts. You can 
determine how long this period by setting a timeframe 
in the respective menu. This can help prevent 



spammers from attacking older articles that may have 
more established web traffic. 

Moderating incoming 
comments 

When a comment passes through the Akismet filter 
don't just assume that it is safe to publish it Spam 
commenters are getting smarten as a result the 
comments you receive could fool you into thinking that 
you have an inquisitive reader. If in doubt try Googling a 
line from the comment. If you see the exact same 
comment in the search result then chances are that you 
have a spam comment on your hands. 

Checking your spam 

Once Akismet has captured a spam 



comment it will hold it for a number of days before 
deleting it from your database. Some users argue that 
it's worthwhile checking your spam page roughly once 
a week to ensure the plugin hasnt pounced on 
anything legitimate. Click on Comments followed by the 
Spam link. You can hover over a comment and select 
the Not Spam link to remove it from the spam queue. 
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Trackbacks 

and 

Pingbacks 



Trackbacks and Pingbacks are 
designed to operate as a way for 
bloggers to share traffic around 
reiated oniine content. A trackback is 
akin to a blogger referencing your 
post in their own blog (via a link) and 
sending a trackback. This will appear 
in your comments queue as a 
trackback. If manually approved, it will 
appear in your blog as a title, an 
excerpt and the link to your blog. 
Pingbacks largely work in a similar 
way but the process is more 
automated. Unfortunately it can be 
used as a way for spammers to 
infiltrate your site with the vague 
promise of extra exposure for your 
content. In most cases the trackbacks 
and pingbacks you may receive may 
most likely be spam. You can disable 
these in the discussion section of the 
settings tab. 
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Top tip 

The Akismet widget 
displays the number 
caught spam comments. 
Add this to your blog by 
clicking Appearance> 
Widgets and dragging 
the Akismet Widget 
box to the relevant 
widget are. 
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Adjusting Akismet’s 
strictness 



Akismet has two simple ways of operating. It can either 
instantly remove the most blatant examples of spam, or 
hold all spam for 15 days in the spam folder before 
removing it automatically, depending on your 
preferences. To change this setting, click on plugins 
followed by the Settings link in the Akismet section. The 
option is available just below your stats summary. 



^ ^ Add Captcha 

I I Captcha has been a useful tool in reducing 
spam comments. It uses random images which the user 
must enter manually in order to post a comment. Whilst 
it can reduce spam it may also annoy regular site users 




who comment frequently. Search the Wordpress plugins 
directory for Captcha to see what's on offer. 

001 <blockquote> 

002 Your comment is currently in the 
moderation queue. Please do not submit 
your comment twice it will appear 
shortly. 

003 </blockquote> 

004 <input name=”submit” type=”submit” 
tabindex=”5” value=”<?php _e(“Say it!”); ?>” /> 

005 </p> 

Prevent repeat comments 

Your users may not be aware that you have 
comments awaiting moderation. As a result they may 
impatiently post the same comment again in the belief 
that their first comment was not received. It's not 
necessarily spam but it can still be a frustrating 
knock-on effect of spam management. Open your 
comments.php file and replace the code <input 




name=’submit' type='submif tabindex="5' value="<?php 
eCSay it!'); ?>" /> with the code above. This will help 
manage expectations and reassure your visitors. 
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Increase 
your site 
visits 
with SEO 

SEARCH ENGINE OPTIMISATION COVERS A MULTITUDE OE 
DIEEERENTTOOLS ANDTECHNIOUESTO HELP TO INCREASE 
YOUR SITE'S PROMINENCE ON SEARCH ENGINES 

€€■ The WordPress SEO plugin by 
Yoast is a comprehensive SEO tool 
with lots of advanced features §§ 



TUTORIAL 

OBJECTIVE 

Understand how different 
SEO tools and techniques 
can be used to increase 
your sites viewership 

TIME REQUIRED 

1 hour 




SEO MANAGEMENT IS one of the 
most overlooked parts of promoting 
your blog or website. It's important 
to market your site to potentiai visitors 
via sociai networks and through the creation of 
new content, but if you want to increase your 
viewership and bring in new viewers who you 
might otherwise not be abie to access through 
sociai networks then it's time to get into SEO. 
There are pienty of SEO piugins avaiiable for 
Wordpress. Some are very simpie to use but 
offer iimited tools, others are highly advanced. 
The WordPress SEO plugin by Yoast is a 
comprehensive SEO tool that includes a lot of 
advanced features. The developer also offers a 
lot of tutorials, posts and support to users 
making it the perfect plugin for wrapping your 
head around SEO. 




SEO Plugins 

If you have a working knowledge of WordPress 
but are new to SEO then consider checking out some 
simple SEO plugins. The WordPress SEO plugin by Yoast 
offers users more advanced options and preferences 
when working with SEO on your site. In these steps the 
WordPress SEO plugin will be explored and explained. 
Install the plugin via the WordPress plugin tool then 
activate it. The plugin will appear under the title SEO on 
your WordPress toolbar. 



Dashboard 

The Yoast plugin dashboard provides you with 
general settings for SEO management of your WordPress 
site, if you are new to SEO management then under the 
General subheading click Start Tour for a detailed walk 
through of all the tools available in the Yoast SEO Plugin. 
You can also reset all of your plugin settings from here. At 
the bottom of the Dashboard Is the webmaster tools. 
Here Yoast has setup a selection of links that can be 
followed to verify your site with various webmasters. 



Verify your site 

Click on a webmaster link below the 
Webmaster Tools subheading, such as Google 
Webmaster Tools. You will be prompted to sign in with a 
Google account. To Verify via Google you will need to 
download a HTML verification file from Google. You will 
then need to upload the file to your site then click Verify. 

Titles & Metas 

Erom the Yoast SEO plugin click on the Titles & 
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<top left> 

• With dozens of different SEO 
toois availabie the WordPress 
SEO Piugin iets you manage 
every aspect of your site's search 
engine presence 

<bottom left> 

• Check out the descriptions and 
screenshots for SEO plugins to 
get an idea for how basic or 
advanced each of them are 
<bottom right> 

• The WordPress SEO piugin 
from Yoast provides you with an 
introduction tour of the plugin 

if you are not familiar with 
SEO management 



Metas tool. On this page you can adjust how titles and 
meta data from your website are going to be presented 
to those viewing it from a search engine. To begin, under 
the General tab you can adjust your meta data settings. 

A lot of the general settings are for tidying your site's 
meta data and the way that site links are presented. 

For Example, checking the noindex subpages of archives 
option will tidy a URL to hide /page/2/ in the URL of 
your site. 



than date or through a sequence of numbers will 
help make your posts easier to find on search 
engines. Under the Post Types subheading you can 
add Meta Descriptions to posts, pages, quotes, 
portfolio pages and any other types of publishable 
content. This information will appear below your post title 
in search engines, again helping to increase the your 
ranking and show potential visitors more information 
about your site. 



Top tip 

It’s very important that 
you tag your post 
correctly. Tags not only 
allow viewers to navigate 
your posts easily but they 
help make your posts 
easier to find online via 
search engines. 



Home page Titles & Metas 

In the Titles & Metas page click on the Home 
tab. By default Yoast presents your site's title information 
with the Site name, the page name and the site 
description. Edit the Title Template text box to change 
this. Add a meta description in the Meta description 
template. Click Post types to work with your title and 
meta information for all of your website's posts. 

Importance of titles 

The proper use of titles in your posts is one of 
the simplest ways of increasing your rank ship on a 
search engine. Having posts titled by their name rather 



SEO Social tools 

Click on the Social tool in the SEO sub-menu. 
The Yoast plugin is compatible with Facebook insights, 
Twitter and Google-r. With Yoast's social tools you can 
enhance the SEO of your site’s social networks. To work 
with Eacebook SEO click Add Eacebook Admin in the 
Facebook subheading. You will be linked to Facebook 
and Yoast will ask for permission to access your profile. 
Once a Facebook admin has been assigned add a 
Facebook page URL, then add the Front Page settings 
including an Image URL, title and description. For Twitter 
and Google-r add your details in each of the social 
networks subheadings. 



XML Sitemaps 

The XML Sitemap of your site is what allows 
search engines to see that your site has been updated. 
This is a key aspect of SEO and by making sure that sites 
such as Google know that you're site is being updated as 
often as possible, you will see an improvement in your 
sites presence in search engines. The Yoast XML Sitemap 
also includes image posts, helping your site appear 
higher on image results for search engines. 

Enabling Sitemaps 

In the XML Sitemaps window check the box to 
enable XML sitemap functionality. Erom now on any 
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9 § One of the newest features of Yoast’s SEO 
plugin is the Bulk Editor. Erom here you can access 
and edit all of your site’s posts ® f 



updates made to your site will be sent to Google and 
Bing. You can also include Yahoo and Ask.com to receive 
updates to your site. With XML Sitemaps you can exclude 
certain site content that you don't want to be pushed to 
search engines whenever an update is completed, this 
can also be applied to site taxonomies. 

Tidying permalinks 

Under the SEO Permalinks subheading you can 
activate or deactivate a selection of permalink settings 
that can help to tidy your site's permanent URLs for posts 
and pages. Before changing permalink settings within 
the Yoast Plugin open your WordPress settings and click 
Permalinks. Here it's advised by Yoast that you select 
either Post name or Custom Structure for your post URLs. 
This approach makes your posts more timeless, as the 
URL title refers to the post title rather than the date it was 
published. Return to the Yoast SEO Permalinks window to 
then select your preferred permalink settings. 

Breadcrumbs settings 

Breadcrumbs refer to the displayed path in which 
a visitor has taken to get to a post. This path is normally 
visible at the top of a site. A typical Breadcrumb would 
be Home>Blog>Blog title. The Breadcrumb settings 
can be found under the Internal Links window in the 
SEO sub-menu. Under Breadcrumbs settings you can 
enable breadcrumbs and adjust the layout of your site's 
breadcrumbs. The taxonomy to be displayed for your 
posts, guotes and portfolio pages can be changed in the 
Internal Links window. 



Inserting breadcrumbs 

A PHP code is provided at the bottom of 
the page for you to insert into your theme, so that 
breadcrumbs will appear at the top of your posts. A plugin 
from Yoast called Yoast Breadcrumbs is also available for 
you to install breadcrumbs into your site if you are not 
code savvy. Eor more details on how breadcrumbs work 
in WordPress and with the Yoast SEO plugin visit 
yoast.com/wordpress/plugins/breadcrumbs/fora 
tutorial on Inserting breadcrumbs into your site's theme. 

Importing SEO data 

If you have dabbled in SEO plugins previous to 
using Yoast's SEO plugin then you may have a collection 
of SEO data that you want to import into the WordPress 
SEO plugin. Open the Import & Export window in the 
plugin's sub-menu. Check the box next to the name of 
one of the compatible plugins that you want to import 
data from, then click Import. 

Export SEO data 

In the Import & Export window you can also 
export all of your SEO settings from the WordPress SEO 
plugin. The reason to do this is if you want to import your 
exported data into another WordPress site. Once you've 



setup the plugin how you want it for your site, its settings 
can be easily applied to other sites, with only a few minor 
tweaks needing to be made to suit each individual site. 

Re-importing data 

Under the export subheading click Import 
Settings. A zip file titled settings.zip will be downloaded. 
Upload the zip file to your FTP. Install the WordPress SEO 
plugin on another WordPress site then re-visit the Import 
& Export window. At the bottom of the page click Import 
settings. The settings.zip file will be imported and Its data 
will be applied to the plugin. 

Bulk Editor 

One of the newest features of the plugin is the 
Bulk Editor. From here you can access and edit all of your 
site's posts. You can also quickly create Yoast SEO titles 
for all of your posts using the text box provided next 
to each post URL. Bulk editing can be performed with 
titles and descriptions of posts. Switch between titles and 
descriptions at the top of the Bulk Editor window. 

More tools 

Open the Edit Files window to edit the .htaccess 
and robots.text files. Don't change any of these files if you 
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The basics 
ofSEO 

Once the WordPress SEO plugin has 
been installed you will find a panel for 
it at the bottom of any new post that 
you create. In this panel you can add 
details to your post to help its online 
presence. You wiil also be provided 
with a preview of the post as it would 
appear on a search engine. Add 
keywords and an SEO title as well as a 
Meta description. Once you’ve added 
these details click on the Page Analysis 
subheading. Here you will be able to 
see the strengths and weaknesses of 
your post in relation to its SEO 
potential. If you would like to, make 
some changes to the post. This could 
get you more green circles in the Page 
Analysis. Use the Advanced 
subheading to add more information 
such as Breadcrumbs title and Sitemap 
options. Finally, use the Social 
subheading to create meta data for 
both Facebook and Google+ updates 
linking to the post. 



are not one hundred percent sure of 
what you are doing as you can make 
irreversible changes to the plugin. Below this 
tool in the tool bar is the extensions option. 
Here you can download more extensions 
for the plugin, including WordPress SEO 
Premium, which offers even more features for 
SEO management. 



WordPress does provide 
a few simple yet very 
important tools to help 
you manage your SEO. 
Go to the Settings tool in 
the WordPress tool bar. 
Under the General 
settings fill in all of 
these details. 
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Plugins 






Add a Social 
author bio 

ADD PRE-SET AND CUSTOM LINKSTO ALL OE YOUR DIEEERENT 
SOCIAL NETWORKS AND SITES TO AN AUTHOR BIO WINDOW 
THATWILL APPEAR AT THE BOTTOM OE YOUR WEBSITES PAGES 
AND POSTS 



f ® When creating blog posts in 
WordPress your post will be 
accompanied with information 
on the person who created it fi 




TUTORIAL 

OBJECTIVE 

Insert a detailed Author Bio 
section to your website or 
blog, featuring an avatar, 
bio and social links. 

TIME REQUIRED 

15 minutes 




THE USER BIO of any WordPress site 
is an important part of your website 
or biog. It provides viewers with details 
as to who has created the post and 
makes it easier for those who want to follow your 
site to connect with you via different social 
networks. When creating blog posts in WordPress 
your post wiii be accompanied with information 
on the person who created the post. Details on 
the poster can be created with the User tool in 
WordPress. Here you can create new users and 
include bio information and an avatar image. With 
the Social Author Bio plugin you can fully 
customise your bio information providing viewers 
with quick links to your social networks. You will 
also be able to create custom links to any website 
of your choosing. 



Top tip 

Author information 
is a must if you want to 
promote yourself and other 
authors so that visitors can 
associate your posts with 
you and link to your social 
networks, thus increasing 
your potential hits * 
and followers. 




m Social Author Bio 

Open the Add New window of WordPress's 
Plugin tool. Search for Social Author Bio by Nick Powers. 
Install the plugin then activate it. The Plugin will appear 
with its own icon in your WordPress toolbar. The Social 
Author Bio plugin is broken up into three sub-sections. 
General. Custom Links and Advanced HTML/ Style. 

General Settings 

Open the plugin's general window. Under the 
'When to Display Social Author Bio' subheading select 
where you want the Bio to be displayed. The Bio will 



appear at the bottom of your pages and posts by 
default. You can change the positioning in the General 
window of the plugin. Enable the Social Author Bio on 
your posts then preview a post to see how it looks. 

Use Shortcode 

Selecting the Shortcode option allows you to 
copy and paste the provided shortcodes into pages and 
posts that you want to include the bio information. Two 
Shortcodes are provided, one of just the bio and one 
that includes all selected social links. The added benefit 
of working with shortcode placement for your bio is that 



you can then place it anywhere on the page or post that 
you like. 

Add the code 

Now we know what changes we are making 
we need to add them to the Style.css file of our child 
theme. Above is how the entire section of text should 
look within the tile. Note that the changes to the text 
have been added below the ©import line. Either we can 
edit the file locally and upload it via FTP or open 
Appearance > Editor from the WordPress Dashboard 
and add the code below the ©import line. 
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Custom Links 

Returning back to the Social Author Bio plugin 
open Custom Links to create your own custom links to 
sites that you want to appear Add a link name and 
Image URL as well as prepend URL text and Append 
URL text If necessary You can add up to ten custom 
social links, and remember to click Saye Changes. Keep 
In mind that the Image URL provided will appear In full 
size so you will want to use 32x32 pixel images to keep 
with the continuity of the pre-set social link thumbnails. 

Publishing custom links 

Once you've created a custom social link 
return to WordPress's Users>Your Profile window. Below 
the pre-set social icons any custom social uris that 
you’ve created will appear. Input a weblink in the text 
box below the image. Activate your custom links from 
here and they will appear at the bottom of your social 
author bio. 

Advanced HTML/ Style 

Return to the Social Author Bio plugin and 
open the Advanced HTML/ Style window. In this window 



you can edit the HTML code for your Social Author Bio 
plugin, changing the layout, ordering and arrangement 
of information that Is displayed. You can also edit the 
style of the bio manually. 

Match your theme 

In the Advanced HTML/Style window 
scroll down to the Edit Style for Social Author Bio 
HTML window. Adjust the font weight and size as 
you like to match your current theme. In the 
HTML window go to the Bio Socials area to modify 
the spacing and arrangement of your social 
link's icons. 

Replacing social link 
images 

The Social Author Bio plugin provides you with image 
thumbnails for your social links, however some of these 
icons can fall out of date. Some of the icons may not be 
to your taste either. Access your sites FTP folder and go 
to /wp-content/plugins/social-autho-bio/images. Here 
you can replace any of the provide images with your 
own thumbnails. 



More author 
tools 

There are plenty of other author settings and 
plugins available within WordPress. The Author 
Image plugin allows for easy replacement and 
updating of the image associated with each 
created author on your WordPress site. The Author 
Recent Posts plugin works as an embeddable 
widget that will display all of the latest posts from 
an author, if this feature is not present in your 
WordPress theme then it is a great way to identify 
and promote particular authors' posts on your site 
or blog. The interface for this widget is fully 
customisable, allowing you to include image 
thumbnails and descriptions of each of the listed 
posts. The Top Authors plugin works in a similar 
way except it lists the top posting authors of a blog 
within the widget, again helping to present viewers 
with your sites top content, it also provides your 
viewers with a good impression of your content. 
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Build a 
Word Press 
slideshow 

INSTALL A WORDPRESS SLIDESHOW GALLERY PLUGIN SO THAT 
YOU GAN LINKTO BLOG POSTS AND PAGES OR GREATE A 
GALLERY OE IMAGES ON YOUR WEBPAGE, GREATING A VISUAL 
NAVIGATION TOOL 



if If you know exactly how you 
want to use a slideshow in your site 
then it is worth finding a plugin that 
is specific to your blog’s needs f f 



TUTORIAL 

OBJECTIVE 

Install a WordPress 
slideshow gallery plugin 
so that you can Link to blog 
posts and pages or create 
a gallery of Images on your 
webpage, creating a visual 
navigation tool 

TIME REQUIRED 

10 minutes 




SLIDESHOWS ARE ONE of the 
easiest assets to add to your 
WordPress website. They can be 
used in a variety of different ways 
depending on how you want to utiiise them. 
Siideshows can hoid a series of high-res images 
for you, working as an interactive portfoiio of 
your work. This is especiaiiy usefui for designers, 
artists and photographers. A siideshow can 
aiso work as a great header to your site or 
biog, dispiaying header images for your iatest 
biog posts, if you know exactiy how you want 
to use a siideshow in your site then it is worth 
finding a piugin that is specific to your needs. 
However, there are a iot of generai siideshow 
piugins to choose from, in the foiiowing steps 
you wiii iearn how to embed a siideshow gaiiery 
into your site. 
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m Slideshow plugins 

In WordPress go down to the Plugins 
tool from the tool bar and click Add New. Search 
Gallery Slideshow in the search bar. There are 
hundreds of Slideshow plugins to choose from, 
each offering different tools and options. Browse 
through the details on each plugin to find one that 
suits your needs. 

Slideshow gallery plugin 

The top rated slideshow gallery plugin is 
called Slideshow Gallery developed by Tribulant 
Software. Click Install to install the Slideshow Gallery 
plugin. After installation click Activate Plugin. A 
slideshow icon will appear below your settings icon in 
the WordPress tool bar. Go to Plugins>lnstalled Plugins 
to deactivate the plugin. 

Working with slides 

The Slideshow Gallery plugin uses two key 
tools to create a slideshow for you. Each image that you 
add is attached to a slide. The slide will have a title and 
description as well as a link if need be. To create a 



f\/. Working with Galleries 

The second tool you’ll be using to create 
your slideshow is Galleries. Each slide that you create 
must be associated with a gallery within the plugin. 
Once you've associated multiple slides to a gallery you 
can then paste a galleries PHP code into a post, page 
or portfolio. 

OC Create a gallery 

Hover over Slideshow at the bottom of your 
WordPress tool bar then click Manage Galleries. Click 
Add New. To add a new Gallery all you have to do Is 
add a title then tap Save Gallery. You will be taken 
back to the Manage Galleries window. Next to each 
newly created gallery a shortcode will be displayed. 

It is this code that you can use to embed your 
galleries into posts. 



06 



Create new slides 

Under the Slideshow plugin in the WordPress 



tool bar click Manage Slides. Click Add New. Begin by 
adding a title and description to your slide. Remember 
that all slide information will be associated with the 
image that you link to that particular slide. Under the 
Show Information subheading select what information 
you want the slide to display. Any information will 
appear at the bottom of an image when being viewed 
in a slideshow. 

Slide options 

/ Since you have already setup a gallery you 
can now link your slide to it. Under the Galleries 
subheading select a gallery. Now when you paste the 
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Galleries shortcode into a post this image will be 
displayed. You can add a slide to as many galleries as 
you like. 

Image upload 

Images can be imported straight from your 
computer or through a URL. The Slideshow plugin does 
not use the WordPress media tool to import images so 
you can’t access images already stored in your media 
library other than adding the image's URL. Finally click 
Yes under the Use Link subheading if you want to link 
to another webpage from this image. Links can be 
opened in the current window or in a new window. Click 
Save Slide. Repeat this process for as many images as 
you want to include in your post. 

Test your slideshow 

Return to the Manage Galleries window. Copy 
the shortcode from the gallery you have created, which 
now includes the slides you just created. In WordPress 
create a new Post or Page. In the post edit window click 
Text then paste in the shortcode. Click Preview. A 
slideshow of your images will now appear in the post. 



By default the slideshow is set to a certain size. The 
slideshow will automatically scroll through your images. 
Click on the image to test the web link that you 
associated with the image. 

Order your slides 

If your slideshow is working correctly return 
to the Manage Galleries window. Hover over your 
gallery title then click Order Slides. In this window you 
can arrange your slides by dragging and dropping 
them in the order that you want all of your images to 
appear in. 

Configure your slideshow 

I I Under the Slideshow plugin in the tool bar click 
Configuration. In this window you can effect and modify 
almost every single aspect of your slideshow. The 
General settings can be used to adjust the slide controls 
of a slideshow as well as the speed that the gallery goes 
between slides. You can include navigation controls for 
people and decide at what point the slideshow stops 
rolling. You can also turn on image information or turn it 
off for mobile users. 



Show Thumbnails 

Turn on the Show Thumbnails option to 
display thumbnails of all the images in the slideshow at 
the bottom of the slideshow. As with navigation controls 
you can adjust the positioning, size and opacity of your 
thumbnails. Use of thumbnails depends on what you 
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Formatting 

images 

For the most high quality gallery 
slideshow you should format your 
images first. The slideshow plugin will 
accept different image sizes and 
formats, however you may find some 
inconsistency between images as the 
slideshow slides between images. 
Within the configuration window of 
the plugin you can set your slideshow 
to adjust its size for each image. This 
means that each image will be 
presented as is, although there will be 
no continuity between photos. Using 
simple photo editing software such as 
Photoshop, or a browser based editor 
like pixlr.com, crop your images down 
to the same size, quality and image 
format. In this example the image has 
been cropped down to a banner size, 
perfect for the header of your site. 



want to use your slideshow for. If it's to exhibit 
photography then Thumbnails are a great way to allow 
people to navigate between images. If your slideshow is 
to be used as a header to preview sections of your site 
you may want to turn off thumbnails and just give users 
navigational control. 



13 



Responsive 

slideshows 



Top tip 



Under the Appearance & 



Style subheading select 



Responsive in the 
Confriguration window for 
the quickest and tidiest 
slideshow setup. Next to 



Resize Images select No 



then choose a gallery 



width and height that 



suits your site. 



Under the Appearance & Style 
subheading you will want to 
use either a responsive or 
fixed layout depending on 
your image types. A 
I responsive slideshow will 
adjust its dimensions 
according to the size of an 
image. You can select the 
height of a slideshow in 
pixels or percentage and 
switch on the Auto Height tool to 
adjust a slideshow to accommodate 
the height of each image. A responsive 
slideshow is useful when exhibiting photography. 



making sure that an image is seen in full without 
being cropped. 

^/, Fixed slideshows 

I "t Selecting a fixed layout for your slideshow will 
fix the dimensions of a slideshow to a set pixel height 
and width, which you can determine under the 
Appearance & Styles subheading. If you are using a 
slideshow to preview posts or pages on your site then a 
fixed slideshow is advised. Ideally you will format all of 
the images in the slideshow to the same size to create a 
more visually appealing slideshow. The default size of 
the fixed slideshow is 450x250px, creating a web 
banner sized slideshow. Play around with dimensions 
and preview them to see what works for you. 

1C Media slideshow 

I Search for the GMedia Gallery plugin in the 
Add New window from the Plugin section of the 
WordPress toolbar. This plugin allows you to create 
slideshow galleries for all forms of media including 
video and audio files. With GMedia you can embed 
videos from sites like YouTube or SoundCloud and 
implement them in a slideshow layout. 



iw Using simple photo editing software such as 
Photoshop, or a browser based editor like 
pixlr.com, crop your images down to the same 
size, quality and image format 
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Schedule 
your blog 
posts 

SCHEDULE THE TIME AND DATE EOR POSTS WITH 
THE WORDPRESS EDITORIAL CALENDAR PLUGIN. USE 
THE EDITORIAL CALENDAR’S SIMPLE DRAG AND DROP 
INTEREAGE TO SCHEDULE POSTS EASILY 



TUTORIAL 

OBJECTIVE 

Schedule posts with the 
Editorial Calendar’s easy to 
use interface 

TIME REQUIRED 

5 minutes 




THE EDITORIAL CALENDAR plugin by 
Colin Vernon provides WordPress users 
with an easy-to-navigate scheduiing system 
■=■ to help you with managing your blog's 
schedule. When creating a new post in WordPress you 
can assign a date and time at which the post wiii be 
pubiished. Reviewing and changing the publish date of 
a post can be a little clunky in WordPress and this is 
where the Editorial Calendar plugin really comes in 
handy. With its Calendar layout you can easily drag and 
drop posts into the calendar to determine when they’ll 
be published, as well as being able to go into posts to 
edit them from the plugin. The Editorial Calendar makes 
it easy for you to amend and review your publishing 
dates for posts within your WordPress blog. 




124 WordPress Genius Guide 






Word Press 
Genius Guide 



- 


<top left> 

• You won’t be able to drag and drop posts that 




have already been published, but you can still edit 
their schedule as you normally would in a 


' ~ ^ 


WordPress blog 


JT'"-"— _ _ _ _ 


<top right> 




• Using the Editorial Calendar Quick Edit tool 
provides you with an easy way to edit a post 
without having to load it up through the WordPress 
post window 




<left> 

• Use the Editorial Calendar Screen Options to 
adjust the layout of your calendar and the details 
presented alongside posts within the calendar 



Top tip 

Although the content text box 
in the Calendar post creation 
window is much more limited 
than creating a normal 
WordPress blog you can paste 
short code and HTML into the 
content box. This is useful if 
you have pre-set coding for 
every post. 



m Install Editorial Calendar 

Go down to the Add New section of the Plugins 
tool of WordPress and search for the Editorial Calendar 
plugin. Click Install Now. Once installed, click Activate Plugin. 
You can access the Editorial Calendar plugin by clicking on 
Post in the WordPress tool bar then clicking Calendar from 
the sub-menu. 

Navigating Editorial Calendar 

When viewing the Editorial Calendar you will be 
taken to the current Month. Any posts that are scheduled to 
be published within that month will be displayed. You can 
also go back to previous months where already published 
posts can be found. Click Show Unscheduled Drafts in the 
top right corner of the window to display any Draft posts 
that have yet to be scheduled for publishing. 

Editing a post 

Hover over any post that is displayed in the 
Editorial Calendar. A sub-menu will appear with the option to 
Edit, Quick Edit, View or Delete the post. By clicking Edit you 
will be taken to the WordPress Post edit window. The 
Editorial Calendar has its own Quick Edit floating window 
that will appear when using the Quick Edit tool. In the Quick 
Edit window you can edit a post's title, content, posting time 
and status. 

OZl posts 

If a post has not yet been published you can click 
and drag on it within the calendar. Drag the post to the date 
that you want it to be published on. You can then use the 



Quick Edit tool to setup a publishing time for the post. Posts 
can also be dragged into the Unscheduled Draft window. 
Draft posts can be dragged from the Unscheduled list into 
the calendar and setup with a scheduled publishing date. 

Managing your calendar 

\J\J At the top of the calendar window click Screen 
Qptions. Here you can adjust what information is displayed 
in the calendar cell. You can also determine how many 
weeks are displayed in the calendar. You can use the scroll 
wheel on a mouse to change the displayed month with a 
post selected, however this tool can sometimes be a bit 
buggy so extending the amount of weeks displayed gives 
you more flexibility for dragging and dropping a post 

Create New Posts 

Hover over a date on the Editorial Calendar then 
click New Post to open the Quick Edit window for a new 
post. Creating a new post in the Editorial Calendar is more 
limited than building a post in the WordPress post window, 
however you can quickly add text content and setup a 
scheduled posting time through this window. 

Saved calendar posts 

§ Under the content box select a time either in AM 
or PM and then a status. Either select Draft, Pending Review 
or Scheduled. Then click save. Qnce a post has been created 
within the calendar it will display its current status, showing 
you if it is a draft, pending or scheduled post Once the time 
and date arrives that the post is setup to be published on it 
will then be made live on your site. 




Portfolio Calendar 

The Editorial Calendar plugin is 
applied to the portfolio tool in 
WordPress as well as posts. 

Portfolio items may not need to be 
seen in order of date, nor will they 
display date information. When you 
are building a site that has portfolio 
items featured on the front page or 
has portfolio items that are ordered 
by date then the Editorial Calendar 
can be used as a way of editing and 
arranging your site’s portfolio items. 
Just Visit your theme settings to 
make sure that content is displayed 
in date order then you can prioritise 
your posts and portfolios within 
your Calendar to determine what 
content appears where on your site. 
You can quickly line up all of your 
portfolio posts in a simple order, 
one post per day to order and 
arrange them. 



WordPress Genius Guide 125 








Customisation 



Transform your WordPress site \ \ 



128 Add multiple moving 
backgrounds 

Add moving background elements to 
your site 

130 Create an animated logo 
with CSSS 

Animate your site's logo with this 
great tutorial 

134 Blur and focus your text 
with Font Font 

Use Font Font to create a fun flur and 
focus effect 

136 Build circular on-hover 
navigation 

Improve your site navigation with on- 
hover animation effects 

138 Create animated buttons 
with CSSS 

Make anltmated buttons for your website 
with CSSS 

142 Code a fixed image 
scroll-over effect 

Create a scroll-over hover effect 
with Hugeinc 

144 Make an animated off- 
screen SD menu 




Make the most of your virtual real estate 
by implementing an off-screen menu 

148 Master animated 
pop-up effects 

Make great pop-ups for your website with 
this tutorial 

150 Create a rotating product 
viewer 

Display your products for your visitors to 
see from every angle 
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By adding 
individually coded 
elements to your 
site, you can make it 
stand heads above 
the rest. 



jjsHOWREELt 

PiMKANOy^ 
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TUTORIAL ^ 
OBJECTIVE 

Use HTML5 to create an 
animated header 

TIME REQUIRED 

1 Hour 30 Minutes 



Add multiple moving 
backgrounds 

ADDING A SPECTACULAR VISUAL ELLECTTO YOUR WEBPAGE WILL DRASTICALLY IMPROVE 
YOUR VIEWERS' EXPERIENCE, AND HERE'S HOW YOU CAN DO IT 



ZURICH-BASED CREATIVE AGENCY Hlnderling 
Volkart's tag line Is “Integrated at heart” and its work 
for Swiss International Air Lines showcases the 
agency’s commitment to this philosophy in action. You 

will have seen many of the effects used here before, from parallax 
backgrounds to fullscreen video, but where Hlnderling Volkart 



excels is in combining these techniques and integrating them into 
the story that it is telling on its client's behalf. This is a website that 
demands to be explored: it puts you in the shoes of their pilots, 
aircrew and passengers. It tells the stories that help express the 
values of the airline in such a way that you become fully immersed 
in the world Hinderling Volkart has created: the World of Swiss. 




Top tip 



Available from github. 
com/Prinzhorn/skrollr, 
Skrollr is a standalone 
library and, at around 12kb 
minified, won’t keep your 
users waiting. It defines 
animations and takes 
care of vendor J 
prefixes. 






<3 





Clean type 

Having a Swiss client whose 
values include minimalism, 
precision and attention to 
detail assists the design 
effort a great deal. As far as 
typography goes, there 
won’t be a serif in sight 



Viewport 

The site detects the 
viewport width and if 
you don’t have the 
pixels, you don’t see 
the show. Sometimes 
it’s better to just say 
sorry and move on 



Engaging video 

The videos are a must 
watch and are cleverly 
integrated as part of the 
site experience. You can 
enjoy a flight from the 
cockpit, with the crew, or 
travel as a customer 



Minimal interface 

The interface encourages 
you to explore and there are 
ample visual cues to point 
out the availability of 
content. The menu in the 
top-right provides more 
direct access to content 



Our sign is a promise 
There's so much Switzerland in 
SWISS. 



Background 

If you were a Swiss airline 
you'd be missing a trick if 
you didn’t make use of 
the amazing alpine 
landscape. It provides 
the perfect backdrop for 
the story 
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Inspiration Where do you want to go today? 



Q 



When Microsoft threw down this 
chaiienge during the Nineties, it was 
encouraging peopie to expiore 
possibilities with the tools available. 
Having a rich set of tools to provide a 



dynamic user experience enables 
designers to explore new options and 
Alexander Prinzhorn’s Skrollr library 
ranks as one of the best tools for 
creating visually rich user experiences. 



Skrollr lets you animate any CSS 
property depending on the horizontal 
scrollbar position. Just decide on the 
animation(s) you require and define 
key frames for each element 






Technique Standalone animation library 



m HTML first 

Skrollr animates your page elements when you 
assign data attributes to them and specify the animation 
state that is required for a particular scroll point. The simplest 
task to set up is any parallax background you may require. 
Skrollr can handle any size of graphic, including tiled and 
non-tiled Images. 



001 <div id=”bgl” data- 
position:0px 0px;” 
background-position 
-10000px ; ”></div> 

002 <div id=”bg2” data- 
position:0px 0px;” 
background-position 
-8000px; ”></div> 

003 <div id=”bg3” data 
position :0px 0px;” 
background-position 
;”></div> 



0=”background- 
data-end=” 
450px 

0=”background- 
data-end=” 
250px 

0=”background- 

data-end=” 

0px -6000px 



Animated <div>s 

You animate an element by specifying its position 
on screen at the first scroll point: here 30% from the top at 
scroll point 0 (the top of the page) and the final position: top 
0% (top of the page) then the page has scrolled up SOOpx. 
You can also apply many other transformations. Here, the 
opacity of the <div> changes from 0.7 to 0 as the page 
scrolls up. 

001 <div id=”intro” data-0=”opacity : 0. 7; 
top: 30%;” data-500=”opacity : 0; top:0%;”> 

002 <hl>Multiple Moving 
Backgrounds</hl> 

003 <h2>Using Skrollr</h2> 

004 <p class=”arrow”>T</p> 

004 </div> 

/%0 Flying in 

To create a relatively complex animation using 
these tools is quite straightforward. This animation makes 
the <div> appear from nowhere (scale 0) and do a 
360-degree rotate. Once the user has had the chance to 
read the content, it continues to fly towards the user (scale 
2), spinning round again and disappearing into thin air. Not 
bad work for three or four data statements. The empty 
specification in data-1600 is a code-efficient useful 



shorthand for saying 'keep things as they were at the 
previous scroll point’. 



001 



002 

003 

004 

005 



<div id=”transform” data-500=” 
transform: scale (0) rotate(0deg) ; ” 
data-1000=”transform: scale(l) 
rotate (360deg) ; opacity: 1 ; ” data- 
1600=”” data-1700=”transform: 
scale (2) rotate (0deg) ; opacity : 0 ; ”> 
<h2>Parallax</h2> 

<p>Is only part of it</p> 

</div> 



f\/. Content blocks 

Skrollr also handles content blocks and here the 
content is brought into view as the scroll continues, made 
'sticky' for a few hundred pixels before then scrolling up 
and off screen again. Skrollr will handle multiple animations 
concurrently and the range of effects that is achievable is 
virtually unlimited. 



001 



002 

003 

004 



<div id=”properties” data-1700=” 
top : 100%; ” data-2200=”top : 0%; ” 
data-2300=”display : block; ” data- 
2500=” top: -100%; display : none ; ”> 
<h2>Total control</h2> 
<p>Anywhere on the page</p> 
</div> 



No surprises in CSS 

The CSS is all standard stuff. When using multiple 
layers you’ll need to use z-Index to keep your layers in order 
- and that's really all there is to it However, if you want to 
stand out from the competition, this tool is so easy to use 
that you’ll need to work especially hard to create something 
fresh and original. 

001 #intro { 

002 position : fixed; 

003 left: 50%; 

004 width: 500px; 

005 margin-left:-266px; 

006 background: rgba(255,255,255,0.7); 

007 text-align : center; 

008 z-index:49; 

009 } 



Technique 

Multiple moving 
backgrounds 

When It comes to animating pages, less is 
often more. It's important to consider the 
best way of communicating your content 
and which techniques will best support that 




m Clouds 

This is one huge tile at 
1500x900px but it weighs in at just 38kb. It’s 
starting to look artefact-y, but if site visitors 
are looking closely at your backgrounds 
then it's likely you have more important 
issues to deal with. 




First background 

This background needs to be a 
24-bit PNG to enable the transparency and 
quality the format provides. As well as the 
balloons scrolling, Skrollr enables 
transformations along the X-axis, which 
helps to reduce the appearance of 
uniformed repetitive tiles. 




Second background 

A little trial and error is necessary 
to balance the relationship between the 
backgrounds - but don’t get too carried 
away fine-tuning, as the relationships will 
tend to shift in different-sized viewpoints. 
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Create an 
animated 
logo using 

CSSS 

ADD ANIMATION TO SIMPLE DIVS USING CSSS KEYFRAMES 
AND TRANSFORMS 



TUTORIAL 

OBJECTIVE 

Create an animated 
logo for your website 
using CSSS 

TIME REQUIRED 

1 hour 




CREATING ANIMATIONS USING CSS3 Is 
becoming more and more popular 
because of the ease of use and the 
'=' browser support the new properties 
now have. Also, as Interactive projects get more 
aggressive and mobile devices are now a priority, 
performance has become increasingiy important. 
Animating the scaie, rotation, and position of an 
eiement is now common, in CSS, they're all 
crammed into one 'transform' property, making 
them impossibie to animate in a truiy distinct way 
on a singie eiement. For exampie, what if you 
wanted to animate 'rotation' independentiy, with 
different timings and eases? The '©keyframe' rule 
lets authors control the intermediate steps in a CSS 
animation sequence by establishing keyframes (or 
waypoints) along the animation sequence that must 
be reached by certain points during the animation. 
This gives you more specific control over the steps 
of the sequence. 

In this tutorial, we look at using keyframes 
combined with other animation properties, such as 
'translate', 'transform' and 'transition', and create an 
animated cube you could use as a logo for your site. 



m New HTML document 

The first step is to create a new HTML5 
document and call It 'index.html' and then add in the 
meta data, which includes the 'viewport' meta name. The 
'viewport' meta tag is added just in case we want to 
make our page responsive. And lastly we can add in our 
link to our style sheet. 



001 <meta name=”description” content=”Animated 
Logo using CSS3”> 

002 <meta name=”viewport” content=”width= 
device-width , user-scalable=no”> 

003 <! — css — > 

004 <link rel=”stylesheet” href=”styles.css”> 



Google fonts 

Even though we're not going to be using a 
large amount of text, it's still a good idea to pick the font 
that we think would enhance the style of our logo - and 
what better way than to use Google fonts (www.google. 
com/fonts) to accomplish this. Simply enough we just 
choose the font we want to use and then point to it 
within our head section. 



001 <! — Google fonts — > 

002 <link href=’ http: //fonts. googleapis.com/ 
css?family=Questrial’ rel=’ stylesheet’ type 
=’text/css’> 



03 



Page and cube wrapper 

Using the 'section' element, we can add in 



a wrapper section that we will use to centre all our 
content. Then within this wrapper we can add in 
another wrapper called 'cube-wrapper' and use 



that to give us even more control on positioning any 
elements within. 

001 <section id=”wrapper”> 

002 <div class=”cube-wrapper”> 

003 </div> 

004 </section><! — END wrapper — > 



f\A Logo text 

Adding in the FITML for our logo is going to be 
pretty straightforward as all we are going to do is add in 
a div with a class name of ‘logo texf. And then within that 
we will add an 'hT tag and use a span tag with a class 
name of 'green' to wrap around the first word, so we can 
then give it a green colour using CSS. 



001 <div class=”logo_text”> 

002 <hl><span class=”green”>iCube 
</span> Designs</hl> 

003 </div> 



Building the cube 

The idea of this tutorial is to have a rotating 
cube that just sits below our logo, so the next step will be 
to add a div with a class name of 'cube'. Then inside that 
we add another six divs all with a class name of 'side'. I'm 
sure you can guess each 'side' div represents each side 
of the cube, so let's finish that off in the next step. 



001 <div class=”cube”> 

002 <div class=”side”x/div> 

003 <div class=”side”x/div> 

004 <div class=”side”x/div> 

005 <div class=”side”x/div> 



006 <div class=”side”x/div> 

007 <div class=”side”x/div> 

008 </div> 



Cube content 

Having added our side divs in the last step, 
we now need to add an extra class to each one. As 
you can see each new class represents the side of 
that cube. Then lastly we want each side to show 
some text within and the only sides we won't be 
seeing as the cube spins are the top and bottom, so 
leave those empty. 



001 

002 

003 

004 

005 

006 
007 



008 



<div class=”cube’ 
<div class=”side 
<div class=”side 
<div class=”side 
<div class=”side 
<div class=”side 
<div class=”side 
</div> 

</div> 



front”>CSS3</div> 

back”>HTML5</div> 

top”x/div> 

bottom”x/div> 

left”>Wordpress</div> 

right”>Graphic Design 



Adding our CSS 

# As always when we open a new CSS file, we 
add in some default styles to our page. Here we give our 
background an off-white colour and set the font to 
'Questriaf which Is what we chose from Google fonts. We 
then centre everything and push it down by 100 pixels to 
give our cube some room. 



001 body{ 

002 background: #f9f9f9; 

003 font-family: ‘Questrial’, sans-serif; 
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<top left> 

• Now that we have all the 
HTML completed, we are left 
with just the barebohes of 
our project 

<top right> 

• The first bit of CSS has now 
been added with our 
Google fohtahd 
background colour clearly 
being seen 

<bottom left> 

• With the first animatioh 
sequence added, we can see 
the cohteht spin around 

<bottom right> 

• Now that we’ve added 
some styles to the side 
pahels, thihgsare 
taking shape 



004 } 

005 ftwrapper { 

006 width: 900px; 

007 margin: 100px auto; 

008 } 

Cube perspective 

The cube isn't a cube until we give it some 
perspective, and we can do that by targeting the 
'cube'Wrapper' ciass. We first set its positioning to 
'reiative' and then we give it some perspective. 

001 /* cube wrapper */ 

002 

003 .cube-wrapper { 

004 position: relative; 

005 -webkit-perspective: 500; 

006 -webkit-perspective-origin: 50% 100px; 

007 } 

008 

AQ ©keyframe rule 

With the ©keyframe ruie, we can specify 
where an animation starts and where it finishes and tie 
that into any CSS animation property such as ‘transform’. 
So here we are rotating our cube from 'O’ to ’360’ 
degrees. We then add what is known as an ’identifier’ 
caiied ’spin’ which allows us to add that identifier to any 
CSS rule. 

001 /* keyframes for rotating animation */ 

002 0-webkit-keyframes spin { 



003 from { -webkit-transform: rotateY(0); } 

004 to { -webkit-transform: 
rotateY(360deg) ; } 

005 } 

Spinning the cube 

I Now that we have set the starting point 
and finishing point of our ’spin’ animation sequence, 
we can add that to our cube using 'animation: spin’ 
and set its speed to four seconds and make it infinite. 
One thing to remember is the keyframe identifier 
can be called anything you want, we’ve called it 
‘spin’ so we then know what that animation identifier 
will do. 



001 

002 

003 

004 

005 

006 

007 

008 } 
009 



cube { 

position: relative; 
margin: 0 auto; 
width: 200px; 

-webki t-transform-style : preserve-3d ; 
-webkit-animation: spin 4s infinite 
linear; 

-webkit-transition: all Is linear; 



Top tip 

The ‘preserve-3d’ value 
determines if that element’s 
children are positioned 
in 3D space or 
flattened. 



001 /* cube sides */ 

002 ,side{ 

003 

004 

005 

006 

007 

008 



009 

010 
011 
012 

013 

014 

015 

016 } 



position : absolute ; 
width :200px; 
height :200px; 
display: block; 

background : rgba(255 , 255 , 255 ,0.1); 

box-shadow: inset 0 0 30px 

rgba(0,0,0,0.2); 

font-size :20px; 

text-align : center; 

line-height : 200px ; 

color : rgba (0 , 0 , 0 , 0 . 5) ; 

text-transform : uppercase ; 

-webkit-transition: all Is linear; 



Side panels 

I I If we viewed this in the browser now, we would 
see nothing but our cube’s content spinning around, lost 
and confused. So let’s now add some CSS to the side 
panels of our cube so we can start making things look 
how we want them to look. 



Backside 

I Now that we have some styles added to our 
side panels, we want to think about moving our side 
panels away from the centre to give us that cube look. 
We can achieve this by using the 'transform: translate’ 
property and position the back panel using the ’z’ axis 
and rotate it 180 degrees. 
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001 .back 

002 { 

003 -webkit-transform: translateZ(-100px) 
rotateY(180deg) ; 

004 } 

The right panel 

In this step we are going to rotate our 
right-sided panel on the T axis and translate it on the 'X' 
axis. To help us position the panel to exactly where we 
want it, we make sure we set the rotation point top right 
by using the 'transform-origin' property. 

001 .right{ 

002 -webkit-transform: rotateY 
(-270deg) translateX(100px) ; 

003 -webkit-transform-origin: top right; 

004 } 

The left-sided panel 

The left-sided panel is going to sit exactly the 
opposite to our right-sided panel. So all we really need to 
do is use the same set of properties and values as our 
right-sided CSS rule, but make sure we use a positive and 
negative accordingly. We then set the rotation point to be 
centre left 

001 ,left{ 

002 -webkit-transform: rotateY(270deg) 
translateX(-100px) ; 

003 -webkit-transform-origin: center left; 

004 } 



The top panel 

We have three more panels left and those 
are the top, bottom and front. Both the top and 
bottom panels don't have any content within them as 
we didn't add that within the HTML, simply because 
we wouldnt really see it once we have positioned 
them. But looking at the animation now, we can 
clearly see what panel is what by referring to the 
HTML content. 

001 .top{ 

002 -webkit-transform: rotateX(-90deg) 
translateY(-100px) ; 

003 -webkit-transform-origin: top center; 

004 } 

Bottom and front panels 

To finish off our cube we can now position 
our bottom and front panels. The bottom panel is 
self-explanatory, but the front panel doesn't need 
much work because it is already at the correct angle. 

So all we need to do is push it forward on the Z axis by 
100 pixels. 

001 .bottomf 

002 -webkit-transform: rotateX(90deg) 
translateY(100px) ; 

003 -webkit-transform-origin: bottom center; 

004 } 

005 .frontf 

006 -webkit-transform: translateZ(100px) ; 

007 } 



The typing animation 

To add some more animation to our project, we 
can create a typing animation to our title. So again let's 
add in a start and stop seguence with a custom identifier 
called 'typing'. We have set the ending point to a width of 
7em, but you may want to adjust this depending on the 
length of your own title. 

001 @-webkit-keyframes typing { 

002 from { width: 0 } 

003 to { width :7em } 

004 } 

Blinking cursor 

Now that we have the typing animation 
sequence set we need to create a blinking cursor 
animation sequence so it looks like the text is being 
typed. Again to keep things nice and simple and 
descriptive, let's give this animation sequence the name 
'blink' and a default colour of black. 

001 @-webkit-keyframes blink { 

002 from, to { border-color: transparent } 

003 50% { border-color: black } 

004 } 

Logo text styles 

So now we need to style our text and 
position it accordingly using absolute positioning. 

We then use the Google font we chose (Questrial) 
and set its size. Then let's create the cursor and we 
will make the blink by adding a border right. Then 
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< top left> 

• With the bottom and front panels added, we now have a rotating cube all ready to add our cursor animation 



to shorten the cursor we can add in a line height 
of 1 pixel 

001 ,logo_text { 

002 position: absolute; 

003 top: -70px; 

004 left: 350px; 

005 font-family: ‘Questrial’, sans-serif; 

006 font-size: 2em; 

007 white-space:nowrap; 

008 overflow: hidden; 

009 border-right: ,lem solid black; 

010 line-height: Ipx; 

011 

Animate the cursor 

To animate the right border to look like a 
cursor, all we need to do is add this next bit of CSS to the 
end of the same rule as in the last step (.logo text) The 
values we have set here allow us to control the speed of 
our animation and how many steps It will go through, so 
in our case the number of characters - which is 13 
(including the space in between the words). 

001 -webkit-animation: typing 2s steps 
(13, end), 

002 blink Is step-end infinite; 

003 

004 } 





Top tip 



The transform-origin property 
is used in conjunction with CSS 
transforms, ietting you change 
the point of origin of 
a transform. 



of 'green' and give it a default green colour We will also set 
the font weight to bold so it's more prominent, and that's it 

001 ,logo_text .green { font-weight: bold; 
color: green;} 

OO Final thoughts 

css animations can be used to really bring a 
website to life. While the code for our cube logo may not 
be the most semantic, it hopefully shows how simple it 
can be to bring almost anything on the page to life using 
CSS. So go forth and animate! 
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OO Finishing off our logo 

To give our logo text a bit of colour, we're going 
to target the '<span>' tag we added with the class name 




The ©keyframes at-rule 

The first unusual thing you'll notice about any CSS3 
animation code is the keyframe @ rule. According 
to the spec, this specialised CSS @ rule is followed 
by an identifier that is referred to in another part of 
the CSS. 



001 @-webkit-key frames blink { 

002 } 



The word ‘Blink’ is an identifier and it's chosen 
by us, the developer. The @ rule and its identifier 
are then followed by a number of rule sets (ie 
style rules with declaration blocks, as in normal 
CSS code). 




With the addition of those new rule sets, we’ve 
introduced keyframe keywords and selectors. In 
the code example above, the keyframe selectors 
are 50% and 80%. And the keywords are 'from' and 
'to' - which is what we used throughout this 
tutorial, but you can use either of these to get the 
same result. 



We use the same 
set of properties and 
values as our right- 
sided CSS rule, but 
we use a positive 
and negative 
accordingly 
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TUTORIAL 

OBJECTIVE 

Use HTML5 to create an 
animated header 

TIME REQUIRED 

1 Hour 30 Minutes 



Blur and focus your 
text with Font Font 



THE RIGHT FONT CAN BETHE ICING ON YOUR WEBSITE CAKE. CHOOSING WHICH 
IS BEST AND HOWTO ADAPT ITS LOOK, IS VITAL TO ANY WEBSITE 




WHEN TYPEFACES ARE the very 
nature of your business, such as with 
Font Font, who design and produce 
■= some of the best typefaces in the 
industry, then your site must show these off in 
all their glory. The ffmark.com site has some 
lovely touches on the website, such as being able 
to edit type on books, page layouts and even 
with a world clock. Not only does the user have 
the ability to edit these typefaces but they can 



change them and see them in action 
before purchasing the associated 
type. Users are able to get as 
creative as they want with all the 
possibilities at hand, and the site 
offers a great source of 
inspiration. This site really shows 
off the rich typography that is 
now available for all web 
designers to use today. 



Top tip 



Type geeks may spot Eric 
Spiekermann in the video of 
ffmark.com who is a 
self-pronounced ‘typophile’ 
and one of the world’s 
leading experts on 
typography. j 




Info button 

The info button contains 
instructions to scroll down 
just In case the user doesn’t 
understand the arrow. The 
Icon Is kept consistent 
with site branding and the 
social icons 



Keep the focus 

The main headline of 
the site is in focus while 
the remaining text and 
the background, which 
is a video, is blurred so 
that the user cannot see 
the content 



T o 



Fixed and fading 

As the user scrolls down 
the page the text and 
video remain fixed in 
place but the headline 
starts to fade out, while 
the other text and video 
fade into focus 



More to explore 

The arrow at the bottom of 
the screen is essential in 
allowing the user to know 
that there is more content 
below. This is always 
particularly useful when 
the video fills the full screen 




Try it yourself 

Once the user scrolls 
down the page, other 
content becomes 
available with more 
interactive features that 
enable the user to try 
out the typography 
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Focusing the typography 



Q Inspiration 

One of the most stunning aspects of 
the ffmark.com site is the biurred text 
and background video that appears 
when you enter the site. As the user 
scrolis down the page the headline 



starts to biur, whiie the background 
and second text area are brought into 
focus. The biurring is fairly 
straightforward to do: just add 
'-webkitTiiten blur(32px);'. The same 



technique can also be applied to text 
but we have shown another way using 
the text shadow effect and making the 
text transparent over the top. Then just 
change the amount of blur. 



^^Technique Blur text with Scrollr 



style the body 

We're going to start this project by adding 
some CSS which can be placed either in the head of the 
document or in a separate CSS file. Here we are making 
the font weight bold and increasing the default size of 
the text on the page. As we are blurring text, it's a good 
idea to make it just a little bigger. 

Position the text 

We now position our text that will be placed 
into a container with the ID of intro. We are making this 
fixed on the screen so that as the scrollbar moves down 
the page we can still see the text. This is important as 
we'll be blurring the text. We centre the text on the page. 

001 #intro { 

002 position: fixed; 

003 width: 80%; 

004 left:50%; top:lem; 

005 margin-left : -40%; 

006 padding: 2em; 

00'7 text-align: center; 

008 } 

009 .top { margin-bottom: 80px;} 

010 </style> 

Add body copy 

We will now move to the body section of our 
HTML document and add in the intro ID <div> to place 
our text inside. We then add our text to another <div> 
that has a data element. This will be picked up by 




Here we are controlling the text blurring by hiding 
the original text and turning on the text shadow. 
By increasing and decreasing the shadow 
blurriness we can make the text fade in and out of 
focus quite easily, making for a great effect. 



JavaScript with the Scrollr {github.com/Prinzhorn/ 
skrollr) library that we'll add in the final step. 

001 <div id=”intro”> 

002 <div class=”top” data-0=”color: 

transparent; text-shadow: 0 0 0.1px 
rgba(0, 0,0,1);” data-1000=” text- 
shadow: 0 0 32px rgba(0,0,0,0.5);”> 

003 <hl>FOCUS YOUR MIND</hl> 

004 <p>Scroll down to focus the text</ 
P> 

005 </div> 

The remaining text 

The first text will blur out as the user scrolls 
and the next text will become sharp. We are doing this 
by setting a 32px text-shadow blur at Opx scroll, while at 
lOOOpx scroll we change the text-shadow blur to 0 - so 
no blurring at all. We then hide the original text so that 
we can only see the text shadow. 

001 <div data-0=”color: transparent; 
text-shadow: 0 0 32px rgba(0, 0, 0 , 0. 5) ; ” 
data-1000=”text-shadow: 000 
rgba(0,0,0,l);”> 

002 <h2>ALL WILL BE REVEALED</h2> 

003 <p>CSS text-shadow blur controlled 
by scrolling</p> 

004 </div> 

005 </div> 

Finishing touches 

Download the Scrollr library from GitHub and 
move the 'dist' folder Into your local folder. Then, before 
closing the body tag, add the code shown below to link 
up the library and start It all up. Now save the document 
and view It in the browser to see everything in action. 

001 <script type=”text/javascript” 
src=”dist/skrollr.min. js”x/script> 

002 <! — [if It IE 9]> 

003 <script type=”text/javascript” 
src=”dist/skrollr. ie.min. js”x/script> 

004 <! [endif] — > 

005 <script type=”text/javascript”> 

006 var s = skrollr. init() ; 

007 </script> 







Technique 

Create the map 

The background to the world time section of 
the site features a large and engaging world 
map. Here we show how to create and 
customise a world map for use In your own 
backgrounds to your sites. 




Get the map 

It's virtually Impossible to start 
drawing a world map - and why bother 
when there are so many available online? 
Head over to Wikipedia (blt.ly/pTfg9) as they 
have several maps available In SVG format 
so can be scaled easily to fit any page. Click 
one that you think will best suit your needs, 
it will be displayed on Its own page, save this 
page in order to save the SVG image. 



► 

Edit the map 

SVG files can be opened In vector 
editing applications such as Illustrator or 
Inkscape. Open the file and change the 
colour of the fill to one that will suit the 
design you are creating. You can also select 
local areas such as Antarctica which you 
perhaps don't want to display. 







Save for use 

The final step is to use the image 
on the web so you can either choose 
File>Save for Web and save as a transparent 
PNG image or choose File>Save As and 
choose SVG. Modern browsers will be able 
to display either one of these In the 
document. 
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Build circular 




Inside content 

The navigation items 
are made as reguiar 
HTML containers, so 
any content type can 
be inserted like images 



IMPLEMENT A MINIMALIST GEOMETRIC DESIGN WITH ON-HOVER EEEECT EOR EASIER SITE 
NAVIGATION, AS INSPIRED BY HENGE07.COMVTRAVEL 



Animation trigger 

The animations on the 
page are triggered when 
the user hovers the mouse 
cursor over one of the 
navigation items 



nriuuni 



noncHEn 



\sb»nbol 



Circular shape 

The circle shape of the 
items is achieved by using 
a border radius of 100 per 
cent, enabling any sized 
circle to be made 



Navigation items 

The items are regular 
navigation links refined 
to show as table cell 
style elements for 
content flow and sizing 



Container control 

Each navigation item 
displays with a navigation 
container, allowing size 
control and location of 
the navigation items 
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TUTORIAL 

OBJECTIVE 

Create animated hover 
effects to make menu 
elements stand out 



TIME REQUIRED 




/ 



Pay-per-click 

clarity 

This type of navigation can be 
highly usefui for pay-per-ciick 
campaigns that are designed 
to direct peopie to a targeted 
ianding page. Peopie often 
want to see an overview of 
the information and then 
select for themselves to see 
the parts that interest them, 
which this type of navigation 
can be made to provide. 



SOME TYPES OF navigation design are 
intended to be highly noticeable. In the case 
of the inspiration for this tutorial, it is clear that 
the navigation's purpose is to present itself in 
a way that directs the user straight to a specific part of 
the website. This type of navigation is ideal for areas of a 
website that different types of visitor are accessing by 
making it clear where the information of interest can be 
found. This approach to website design can be highly 
useful for projects that rely on making enquiries or sales 
conversions from users who have never previously 
visited the website. In these scenarios, users who don’t 
immediately see what they want are more likely to click 
on the back button, meaning that the website has failed 
to achieved its purpose. The consequences of these 
'bounces' can be costly in terms of lost opportunities to 
produce conversions and actual cash expenditure. The 
ability to present clear options doesn’t have to be 
restricted to multipage websites - the same concept can 
also be used to navigate to sections on the same page. 
Just use ID names for page content elements and refer 
to them in your navigation elements using # followed by 
the ID name to navigate to in the href attribute. Make 
sure you download the full tutorial code by following this 
link: http://goo.gl/VS9ejb. 

Define HTML 

First create the main HTML content that 
contains the effect’s elements. We'll use a <nav> element 
to contain the <a> links that become the menu items. 
The HTML links to CSS and some JavaScript for the 
visual effects. 

Adapt navigation HTML 

Create a file called 'menu.js'. Our technique 
requires the HTML navigation items to have two span 
items - the first is used as the background circle and the 
second will contain visible content. Adapting navigation 
items with JavaScript means that the default HTML is 
good for SEO. 

Define page basics 

Create a new file called 'styles.css'. Insert the 
initial element formatting CSS to define the page body 
and navigation. This example will have the navigation set 
to have child content placed in the middle and display as 
a block element to display at full screen width. 

Navigation Items 

Page navigation items are the <a> links inside 
the navigation container. These display with a red border 
and have a bigger font size. Navigation items will 
animate when hovered, therefore the transition property 



is used to define an animation transition for an opacity 
of one second for later CSS states. 

Navigation interaction 

The circular navigation items should fade to 
become semi-transparent when the user hovers over an 
item that isn’t being selected. This is achieved in two 
stages - the first defines all navigations to have a quarter 
opacity, then the second stage will select the item to 
have full opacity. 

001 nav; hover a{ 

002 opacity: 0.25; 

003 } 

004 nav: hover a:hover{ 

005 opacity: 1; 

006 } 

Background animation 

The appearing circle animation used in the 
background is made from the first <span> item used as a 
square block refined into a circle using clip-path. Only 
the first <span> element has the properties applied to it 
to show as the animated circle when the user hovers 
over the nav item. 

001 nav a span{ 

002 position: absolute; 

003 display: table-cell; 

004 vertical-align: middle; 

005 text-align: center; 

006 z-index: 0; 

007 top: 0; 

008 left: 0; 

009 width: 100%; 

010 height: 100%; 

011 } 

012 nav a span:first-child{ 

013 background: #C00; 

014 opacity: 0.5; 

015 transition: -webkit-clip-path Is, -moz- 
clip-path Is, clip-path Is, border-color Is;, 
opacity Is; 

016 -webkit-clip-path: circle(0% at center); 

017 -moz-clip-path: circle(0% at center); 

018 clip-path: circle(0% at center); 

019 } 

020 nav a: hover span:first-child{ 

021 -webkit-clip-path: circle(30% at center); 

022 -moz-clip-path: circle(50% at center); 

023 clip-path: circle(50% at center); 

024 border-color: rgba(0,0,0,0) ; 

025 } 










The navigation’s purpose is to present itself in 
a way that directs the user straight to a specific 
part of the website 
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Use csss 

to create 
animated 
buttons 

USING THE TRANSFORM PROPERTY, WELL CREATE 
SOME COOL-LOOKING 3D BUTTONS THAT WILL ADD 
THAT EXTRA POLISH TO YOUR SITE 



TUTORIAL 

OBJECTIVE 

Create animated buttons 
for your WordPress blog 
with CSS3 

TIME REQUIRED 

60 minutes 




CSS3 TRANSFORM HAS been doing the 
rounds for quite some time. Browsers iike 
Firefox, Chrome and Opera have full support 
•=• for CSS3 2D and 3D transform techniques. 
Along with transform, we also have another cool 
property called perspective. 

The perspective property defines the intensity of the 
3D effect. This is because it defines how far the object is 
away from the user. So, a lower value will result in a 
more intensive 3D effect than a higher value. But one 
thing we need to remember is, when defining the 
perspective property for an element, it is the child 
elements that get the perspective view, not the element 
itself. When the transform and perspective properties 
are combined, you can create some great-looking 3D 
animations on a number of different elements. 

In this tutorial we're going to work with the transform 
and perspective properties and their values to create 
four cool-looking 3D buttons that you can use on your 
webpages. Each button will be slightly different in its 
perspective, which will allow us to really get to know 
how the perspective property works. So, open up your 
favourite text editor and let's get startedi 



Get ahead 

After creating a new HTML5 file, open it up 
within your favourite text editor and add in the head 
section. We will need to add in the link to our CSS file and 
make sure we have good browser support for our 
HTML5 and CSSS - so we will use Modernizr. Head over 
to modernizr.com and grab the latest version. 

001 <!DOCTYPE html> 

002 <html lang=”en” class=”no-js”> 

003 <head> 

004 <meta charset=”UTF-8” /> 

005 <meta http-equiv=”X-UA-Compatible” 
content=”IE=edge , chrome=l”> 

006 <meta name=”viewport” content= 
”width=device-width , initial-scale=l . 0”> 

007 <title>Creative 3D Buttons</title> 

008 <link rel=”stylesheet” type=” 
text/css” href =”css/main. css” /> 

009 <script src=”js/modernizr. custom. js”> 
</script> 

010 </head> 

Content body 

With the head section done, we can now move 
on and start adding some HTML within the <body> 
section. As always, we are going to add in a container 
element with a class name of 'container' to allow us to 
centre things easily. Then, we will use the '<section>' 
element and give it a class name of '3D-buttons'. 

001 <body> 

002 <div class=”container”> 

003 <section class=”3d-buttons”> 



004 </section> 

005 </div><! — END container — > 

006 </body> 

007 </html> 

Button HTML 

Within the '<section>' element, we add in a 
paragraph tag with a class name of 'btn perspective', 
which we'll target later using the perspective CSSS 
attribute. We then add in our first button, which will 
contain several class names that we'll target later on. 

001 <body> 

002 <div class=”container”> 

003 <section class=”3d-buttons”> 

004 <p class=”btn_perspective”> 

005 <button class=”btn btn-3d btn-3da">Submit 
</button> 

006 </p> 

007 </section> 

008 </div><! — END container 

009 </body> 

010 </html> 

Finish up the HTML 

We already have the HTML for one button, but 
we want to create another three so we can really test out 
our 3D skills. So, copy and paste the paragraph tag we 
created in the last step and make sure the last class 
name is changed accordingly. 

001 <body> 

002 <div class=”container”> 

003 <section class=”3d-buttons”> 



004 <h2>Creative 3D buttons</h2> 

005 <p class=”btn_perspective”> 

006 <button class=”btn btn-3d btn-3da”>Submit 
</button> 

007 </p> 

008 <p class=”btn_perspective”> 

009 <button class=”btn btn-3d btn-3db”>Submit 
</button> 

010 </p> 

011 <br /> 

012 <p class=”btn_perspective”> 

013 <button class=”btn btn-3d btn-3dc”>Submit 
</button> 

014 </p> 

015 <p class=”btn_perspective”> 

016 <button class=”btn btn-3d btn-3dd”>Submit 
</button> 

017 </p> 

018 </section> 

019 </div><! — END container — > 

020 </body> 

021 </html> 

The CSS 

It's important to start every project with some 
default CSS that we often add to an external CSS reset 
file. For this tutorial we'll just keep it simple and go ahead 
and add some CSS to the top of a file called 'main.css', 
and with this CSS we are making sure our box model is 
set properly to every single element that uses the box 
model (css-tricks.com/box-sizing). 

001 *, *: after, *: before { 

002 -webkit-box-sizing: border-box; 
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003 -moz-box-sizing: border-box; 

004 box-sizing: border-box; 

005 } 

006 body, html { 

007 font-size: 100%; 

008 padding: 0; 

009 margin: 0; 

010 height: 100%; 

011 } 

012 

Body styles 

Next we need to add in some default styles for 
our body and links. This is not vital but makes things nice 
and simple as it keeps it all in one place. The background 
colour is going to be a nice light blue and we're going to 
stick to using Arial as our main font. 

001 body { 

002 font-family: Arial, sans-serif; 

003 background: #0e83cd; 

004 } 

005 a { 

006 color: #888; 

007 text-decoration: none; 

008 } 

009 a: hover, 

010 a: active { 

011 color: #333; 

012 } 

Contain it 

Now we need to create a container that 



wraps around our content. We’re going to set the height 
of the outer container to 100% and position it relative. 
Then we use a child combinator selector (>) to target 
our <section> element and centre everything within 
and add some other default styles. 

001 .container { 

002 height: 100%; 

003 position: relative; 

004 } 

005 .container > section { 

006 margin: 0 auto; 

007 padding: 6em 3em; 

008 text-align: center; 

009 color: #fff; 

010 } 

011 

Heading styles 

What would a page be without a page 
title? Let’s add some styles to that. We’re going to keep 
It simple and make the text white with a 20px margin 
all around. Then we align it centre and make it 
uppercase. All nice and straightforward - so let’s move 
on to the buttons. 

001 h2 { 

002 color: #fff; 

003 margin: 20px; 

004 text-align: center; 

005 text-transform: uppercase; 

006 } 

007 



Button styles 

The Idea is to give our buttons that flat look, 
which can easily be achieved by not adding any rounded 
corners or drop shadows. We will make sure they are 
fairly large so we can clearly see the 3D effect once we 
are finished and, as they are buttons, let’s not forget to 
add the ’cursor pointer' at the bottom of our rule. 

001 /* General button styles */ 

002 .btn { 

003 border: none; 

004 position: relative; 

005 background: none; 

006 padding: 28px 90px; 

007 display: inline-block; 

008 text-transform: uppercase; 

009 margin: 15px 30px; 

010 color: inherit; 

011 letter-spacing: 2px; 

012 font-size: ,9em; 

013 outline: none; 

014 -moz-transition: all 0.4s; 

015 -webkit-transition: all 0.4s; 

016 transition: all 0.4s; 

017 cursor: pointer; 

018 } 

Button pseudo 

Using the ’:after’ pseudo-element, we will make 
sure any content behind our button is taken out by using 
the ’content’ property. We then ensure that eyerything Is 
positioned absolute so we can then set Its Index to ’-T, 
with everything else behind. 
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<top left> 

• Our first 3D button is done 
and we have a nice prominent 
3D effect 

<top right> 

• The second button is now 
done, oniy this time we have 
rotated this at the bottom 
<bottom left> 

• Now the third button is 
done, with this one rotated on 
the X axis 

<bottom right> 

• This is our finai button - 
the 3D effect isn’t as 
nrominent here hut it iooks 




Top tip 

There are several different transform 
functions, each applying a 
different visual effect. Be sure 
to experiment and find 
your favourites. 



Button 3D 

I The ’transform-style’ property wiil determine 
whether that element is in 3D space or is flattened. Of 
course we want it to be in 3D. so we add the 'preserve- 
3d’ value to bring the button into 3D space and not be 
flattened (which is the default). 





■ 


001 


,btn-3d { 


001 . 


btn: after { 


002 


display: block; 


002 


content: 


003 


background: #5cbcf6; 


003 


position: absolute; 


004 


outline: Ipx solid transparent; 


004 


z-index: -1; 


005 


transform-style: preserve-id; 


005 


-webkit-transition: all 0.4s; 


006 


} 


006 


-moz-transition: all 0.4s; 


007 


,btn-3d: active { 


007 


transition: all 0.4s; 


008 


background: #55b7f3; 


008 } 




009 


} 


11 


Button perspective 


4 0 3D animation 


1 1 


The ’perspective:’ CSS property gives an 


1 Here we add our first 3D animation to our first 


element a 3D-space by effecting the distance between 


button (a) and set some other styles. The ’transform- 


the Z plane and the user. The strength of the effect is 


origin’ property sets the point of origin of a transform; 


determined by the value. The smaller the value, the 


the first value is the horizontal position, the second is th 


closer you get from the Z plane and the more 


vertical position. We rotate the ’x’ plane to 90 degrees. 


impressive the visual effect is. The greater the value, the 






more subtle the effect will be. 


001 


,btn-3da: after { 






002 


width: 100%; 


001 /* Button */ 


003 


height: 42%; 


002 . 


btn_perspective { 


004 


left: 0; 


003 


-webkit-perspective: 800px; 


005 


top: -40%; 


004 


-moz-perspective: 800px; 


006 


background: #53a6d7; 


005 


perspective: 800px; 


007 


transform-origin: 0% 100%; 


006 


display: inline-block; 


008 


transform: rotateX(90deg) ; 


007 } 




010 


} 



4 Hover state 

I "t Now this is where the magic happens. We are 
going to rotate the whole button when we hover over it, 
making the rotate quite big so that we can see the 3D 
effect more prominently. To do that we add a -45 
degree tilt to the button on the ’x’ plane. 

001 ,btn-3da: hover { 

002 transform: rotateX(-45deg) ; 

003 } 

4 C Button B 

I The next button (button B) will be using similar 
styles as our first button, but with a few changes. First 
we make sure that the button is positioned 100% to the 
top and origin values both set to 0%. Then we just need 
to rotate this -90 degrees. 

001 /* Button 3db */ 

002 ,btn-3db: after { 

003 width: 100%; 

004 height: 40%; 

005 left: 0; 

006 top: 100%; 

007 background: #53a6d7; 

008 transform-origin: 0% 0%; 

009 transform: rotateX(-90deg) ; 

010 } 

4 O Hover state B 

I Now we have our first button animated in all its 
glory, we just need to use the same property on this 
one. To give us some variation, we will not make this as 
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Top tip 

Even with a small project like this. 

you should always think about 
making it responsive and suitable 
for mobile like how we made 
our buttons larger. 



deep as the first button, so we give the rotateX property 
a vaiue of just 35 degrees. 



001 ,btn-3db: hover { 

002 transform: rotateX(35deg) ; 

003 } 



007 background: #53a6d7; 

008 -webkit-transform-origin: 100% 0%; 

009 -webkit-transform: rotateY(-90deg) ; 

010 -moz-transform-origin: 100% 0%; 

011 -moz-transform: rotateY(-90deg) ; 

012 -ms-transform-origin: 100% 0%; 

013 -ms-transform: rotateY(-90deg) ; 

014 transform-origin: 100% 0%; 

015 transform: rotateY(-90deg) ; 

016 } 



^ O C button animation 

I Let's animate button C by using the same ruie 
as before. This time we need to make sure we are 
rotating the 'Y' axis. Again, we'li change things up a iittle 
by making this 3D effect iess prominent by giving it a 
smailer vaiue of 25 degrees. 



001 ,btn-3dc: hover { 

002 transform: rotateY(25deg) ; 

003 } 



IQ Finish up 

I Now we are aimost done with our 3D buttons. 
Ali we need to do is add some styies to our iast button. 
Again, there's oniy some smaii adjustments in this ruie, 
but we are staying on the 'Y' axis at a positive 90 
degrees and our origin top and left is 0 %. 



001 /* Button 3dd */ 

002 ,btn-3dd: after { 

003 width: 20%; 

004 height: 100%; 

005 left: 100%; 

006 top: 0; 

007 background: #53a6d7; 

008 -webkit-transform-origin: 0% 0%; 

009 -webkit-transform: rotateY(90deg) ; 

010 -moz-transform-origin: 0% 0%; 

011 -moz-transform: rotateY(90deg) ; 

012 -ms-transform-origin: 0% 0%; 

013 -ms-transform: rotateY(90deg) ; 

014 transform-origin: 0% 0%; 

015 transform: rotateY(90deg) ; 

016 } 



Button C styles 

Here we continue on to our next button and 
add some slightly different styies. The thing to note here 
is that the origin is now set to 100% at the top and we are 
rotating the 'Y' axis, not the 'X'. Aiso, to make sure we are 
targeting aii browsers, we've added the browser prefixes 
to this ruie (which you should do for the previous rules) 

001 /* Button 3dc */ 

002 ,btn-3dc: after { 

003 width: 20%; 

004 height: 100%; 

005 left: -20%; 

006 top: 0; 



Button D animation 

Finally we will add in our animation for Button 
D. We are going to rotate this one on the 'Y' axis and 
again we will make this a lot less prominent than before 
by lowering the value to 15 degrees. We've also added 
in our browser prefixes too. 

001 ,btn-3dd: hover { 

002 -webkit-transform: rotateY(-lSdeg) ; 

003 -moz-transform: rotateY(-15deg) ; 

004 -ms-transform: rotateY(-15deg) ; 

005 transform: rotateY(-lSdeg) ; 

006 } 

007 





Responsiveness 

I It's only natural that before we wrap this 
little project up, we think about making the buttons 
responsive. By default the buttons will fall 
underneath each other when the browser window 
Is resized, but we want to think about making these 
buttons slightly bigger so that they are easily clickable 
using your finger. So, all we do is increase the font size 
as shown. 

001 @media screen and (max-width :480px) { 

002 .container { 

003 font-size: 1.2em; 

004 } 

005 } 

OO Final thoughts 

Creating 3D buttons can really help 
enhance your web projects. Hopefully this tutorial 
has demonstrated that not only is it a fun thing to 
do, but it's fairly straightforward to implement as well. 
A challenge for you now would be to try this 
technique to other elements on your page, such 
as vertical menus - it can look really great on 
logos, too. 







Understanding 

transform-origin 

As indicated throughout this tutorial, the 
transform-origin property can take up to two 
space-separated keywords or iength values for a 2D 
transform and up to three values for a 3D transform. 



.square { 

transform-origin: top left; 
transform: rotate(360deg) ; 

} 



Using the code above on a 100 x lOOpx box, with the 
transform applied to a transition using a click event, 
a box wouid swing around 360 degrees once clicked 
on. By default, the origin of a transform is '50% 50%', 
which is exactiy in the centre of any given eiement. 
Changing the origin to top left' (as in the code 
above) causes the element to use the top-left corner 
of the element as a rotation point. 

The first value is the horizontal position, the 
second value is the verticai position and the third 
value represents the position on the Z axis. The third 
value wiil only work if you are using 3D transforms - 
and it cannot be a percentage. 
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TUTORIAL 

OBJECTIVE 

Create this simple effect 
to live by the ‘less is more' 
philopsophy 

TIME REQUIRED 



HUGE o- 



Code a fixed image 
scroll-over effect 

FOLLOW THIS TUTORIAL TO EMULATE THIS ACE DESIGN INSPIRED BYTHE EOLKS AT 
WWW.HUGEINC.COM 




SIMPLICITY IS A goal many designers 
seek but with its ‘less, but better’ 
philosophy, Huge seems to achieve 
■= so much more than the rest. When 
redesigning its own website. Huge continued to 
realise opportunities to evolve, and has 
masterfully engineered an online experience that 
powerfully communicates its brand. 

Positioning their emblematic 'H' front and 
centre provides a perfect vehicle for telling the 



story of the brand and how it works 
with clients. On arriving at the site, 
three full-page slides demonstrate 
the agency's approach and 
values, and when that message , 
has been delivered, the site flows ] 
into a magazine-style 
presentation of what it means to 
be Huge. Less, but better it 
certainly is. 






Top tip 

Huge’s Wes Hatch 
discusses the fullscreen 
scroller at bit.ly/1jxW2HY 
providing a fascinating 
glimpse into the 
development process. 




Redesigned 
Amer1canExpress|:x3m 
rated best in the 
Industry by 
Forrester. — » 
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Q Inspiration 

"At Huge, we really try to understand 
our audience and design for them. So 
when the time came for our own 
redesign, we found that the majority of 
people visiting agency websites fell Into 



Q Technique 



Huge inspiration 

two groups: those who want to work 
with us and those who want us to 
do work for them. So, we set out to 
create an experience that showed off 
the work that we do, with style and 



simplicity for both groups. What we 
came up with is the iconic 'H' a way to 
celebrate great client work, but always 
through the lens of the Huge brand 
and the great people who make If 




Scroll-over effect using fullPage.js 



HTML head 

This technique uses the jQuery library 
and jQuery-UI if you want easing effects. The 
fullPage.js plugin Is well documented In the 
'README.md' file. There are more than twenty 
configurable options and advanced settings. Eor this 
workshop the vertIcalCentered option has been set 
to false so that the titles can appear at top of the 
page rather than over the main graphic. The 
continuous scrolling and page navigation feature have 
been set to true. 

HTML body 

To simulate the effect used on the Huge 
site, the layout and functionality has been kept nice 
and simple for Its visitors. However, you can obviously 
populate each <div> with whatever content you would 
like, as well as make use of the many additional options 
offered by the fullPage.js plugin. Eor example you can 
introduce the addition of a landscape slider just by 
adding in some nested <div>s. There are ten examples 
within the plugin package. 

Style the content 

This example uses only a fullscreen 
background for each section and a single heading. 

You just need to create a new class for each 
background you want to display and then apply the 
class to the relevant section. If you just want to 
change the background colour of each section you 




I 1 



Spanish developer Alvaro Trigo is the creator 
behihd the fullPage.js plugin. It is well 
documented and under active development. If 
you want to extend the functionality you are sure 
to be able to find support on Trigo’s GitHub page, 
at glthub.com/alvarotrlgo/fullPage.js. 



can do this using one of the plugin configuration 
options, slidesColor. 

001 Simport url(http: //fonts. 
googleapis.com/ 
css?family=Righteous) ; 

002 hl{ 

003 font-size: 70px; 

004 line-height: 75px; 

005 padding-top: 40px; 

006 font-family: 

Righteous.arial, helvetica; 

007 color: #eee; 

008 text-shadow: 3px 3px #000; 

009 } 

010 .sectionf text-align:center; } 

011 ,wl { 

012 background: url(imgs/wl . jpg) 
no-repeat center center fixed; 

013 background-size: cover; 

014 } 

015 

Space out the pips 

The jquery.fullPage.css file gives you access 
to the styling applied by the plugin. In the tutorial, the 
navigation ‘pips’ on the right-hand side have been made 
much bigger and lighter and these changes were made 
in the .fullPage-slidesNav II and span. Increasing the 
height enables the 'pips' to be spaced out 

001 . fullPage-slidesNav li { 

002 display: block; 

003 width: 14px; 

004 height: 40px; 

005 margin: 7px; 

006 position: relative; 

007 } 

Grow and colour the pips 

The pip heights and widths have been 
increased to 30px each. As the border radius was set to 
50 per cent, there was no need to change that value to 
have it render the square as a circle. RGBa colours with 
80 per cent and 30 per cent opacity were used to 
enable the background to show through the new white 
controls. There you have it. your scroll-over effect Is 
ready to gol 








Technique 

Initial ideas 

In homage to Huge's iconic Hs, the 
workshop files use the World Wide Web's 
recent 25th birthday for its inspiration. You 
could choose your own letter or Initials, or 
maybe create an original party invitation, the 
possibilities are endless! 




01 



Beauty and boards 

People images are a good choice 



for creating full-page designs and Flickr's 
Creative Commons library Is a great free 
source. You can also find plenty of public 
domain images online or simply create 
your own. 



lilUJIUlng oil over the iuortd 






02 



Consistency 
and contrast 



The key to mastering the effect Is to ensure 
that your central element stays put on each 
section, so you'll probably want to copy your 
layer letter into a new Group for each 
section that you need. 











Create the 
unexpected 



Do something out of the ordinary if you 
really want to be remembered. Whatever 
you do, make it your own. Here we have 
celebrated the completion of the project 
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Make an 
animated 
off-screen 
3D menu 

GET YOUR MENU TO STAND OUT WITH A 
45-DEGREE PAGE VIEW OEE SGREEN 



TUTORIAL 

OBJECTIVE 

Add engagement to 
navigation with 45-degree 
page views 

TIME REQUIRED 

1 hour 30 minutes 




A LOT OF THE projects that are featured 
in this bookazine demonstrate how to 
approach the implementation of some 
^ reaiiy unique features. Most of these have 
some quirky way of interacting with the menu, and as 
the user tends to do most of the interaction with the 
menu, it's usuaiiy a good piace to start when creating 
a unique focai point for your site, in this tutoriai we 
are going to iook at CSS3 transformations that, by 
defauit, are hardware accelerated. As such, we can 
add lovely 3D effects and transitions to our content 
by adding and removing classes that will trigger the 
animations. In this menu we will have an off-screen 
menu that slides in from the left-hand side. There's 
nothing out of the ordinary about that, except that 
our page content will flip out of the way using a 3D 
transform that will enable the menu to take full focus 
on the page. Then, when it's time to bring the page 
back, the user can simply click on the page to get the 
menu to slide back out and the page to rotate back 
into full view. A little trick here to make this work is to 
stop the page from being scrollable while the page is 
rotated out to one side. Experiment with the effect on 
your site, starting by downloading resources from the 
following link: http://goo.gl/S1BkT0. 



m Start the project 

Open the start folder in Brackets or place it in 
your local web server folder. Take a look at the page, 
before starting the project, in a web browser to see that 
there is a basic page on display - a menu needs to be 
added to this. There is a comment in the index.html page 
showing the end of the twist div. Add the menu in here. 



001 

002 

003 

004 

005 

006 

007 

008 



<nav class=''offscreen-nav''> 
<a href=''#''>Home</a> 

<a href="#''>News</a> 

<a href="#''>Blog</a> 

<a href=''#”>Portfolio</a> 

<a href=''#''>Contact</a> 

<a href=''#”>About</a> 

</nav> 



Switch to the css 

Save the index page and move to the style.css 
in the CSS folder. Add the following code in here. It can 
go at the bottom of the document, just make sure that it 
isn't inside a media query. Here the twist class is being 
given a relative position on the page. This will hold the 
menu outside the page. 



001 .twist { 

002 position: relative; 

003 } 



Build the content 

All of the real pages go inside the container 
class. Here it is given a white background because later 
the menu will be given a red background to match the 



design on the screen. It's given a z-index that's higher 
than the rest of the menu so that all the main content will 
be visible above this. 

001 .container { 

002 background: #fff; 

003 min-height: 100%; 

004 position: relative; 

005 outline; Ipx solid rgba(0,0,0,0) ; 

006 z-index: 10; 

007 -webkit-transform: translateZ(0) 
translateX(0) rotateY(0deg); 

008 transform: translateZ(0) translateX(0) 
rotateY(0deg) ; 

009 

More page positioning 

There is a wrapper class just inside the 
container, again this needs to be set to relative so that 
when the design opens, it works correctly. When the 
menu is opened a class gets added to it and this is called 
'open'. Here the twist class is made to be fixed and the 
perspective added. 

001 .wrapper { 

002 position: relative; 

003 } 

004 .twist. open { 

005 position: fixed; 

006 -webkit-perspective: 1500px; 

007 perspective: 1500px; 

008 } 

009 



Tidy up the open page 

When the menu opens, the container that 
holds the regular page content is made to have no 
overflow. This helps it to twist out with a 3D perspective 
to it without having the rest of the page on display. At this 
point the cursor is set as a pointer so that the container 
becomes the button to bring the page back into the 
main view. 

001 .open .container { 

002 position: absolute; 

003 overflow: hidden; 

004 width: 100%; 

005 height: 100%; 

006 cursor: pointer; 

007 -webkit-backface-visibility: hidden; 

008 backface-visibility: hidden; 

009 } 

Add functionality 

As the content is being animated in 3D space 
the open wrapper is given a CSS transformation on the z 
axis. The container is slightly altered when it is in 
animation to be slightly bigger than the screen with full 
opacity. The transition takes less than a third of a second. 

001 .open .wrapper { 

002 -webkit-transform: translateZ(-lpx) ; 

003 } 

004 .animate .container: :after { 

005 opacity: 1; 

006 height: 101%; 

007 -webkit-transition: opacity 0.3s; 






144 WordPress Genius Guide 




Word Press 
Genius Guide = 



9 /^ 



9 /^ 




' ,\.iX > 



I 






Normalize.css file 

The project makes use of 
normalize.css, which makes 
browsers rendering all elements 
more consistently and in-line 
with modern standards. It’s 
available from necolas 
.github.io/normalize 
.css. 



008 transition: opacity 0.3s; 

009 } 

fVy Position the navigation menu 

# Here the navigation for the off-screen menu is 
set in the CSS. The position is set at absolute so that it 
can be animated from the side and made to have a 
height that fits its content. This is given the transform 
position of 50% of the height and to ensure hardware 




Menu items 

Each menu element needs to be styled up in 
the right font weight with the underline and the margin 
taken off to make it appear in the right place on the 
screen. A transition is added so that the text colour can 
change on rollover and to make it all visible. 

001 .offscreen-nav a { 

002 display: inline-block; 

003 white-space: nowrap; 

004 font-weight: 300; 

005 text-decoration: none; 

006 margin: 0 0 30px 0; 

007 color: #fff; 

008 -webkit-transition: color 0.3s; 

009 transition: color 0.3s; 

010 -webkit-transform-style: preserve-id; 

011 transform-style: preserve-id; 

012 } 



< Top left> 

• The basic page layout is 
already set up, the tutorial 
concentrates on adding the 
menu elements and 
functionality of this 

< Top right> 

• The menu is added and 
immediately appears on the 
screen, however it isn't 
styled up yet or set in the 
right position 

< Bottom left> 

• The menu is controlled by 
the icon in the top left-hand 
corner. The burger menu is 
later given the functionality 
to bring out the menu and 
cause the page to rotate out 

< Bottom right> 

• The menu is styled in white 
text and brought onto the 
screen from the left 



006 } 

007 .effect-persp { 

008 background: #b40000; 

009 } 

^ ^ Add the transition 

I In order to make the container swing out and 
twist in 3D space we need to change its transform origin 
point to the centre of it This is given a slightly longer 
transition time than in Step 6, but it all works together to 
bring the effect on the screen. 

001 .effect-persp .container { 

002 -webkit-transition: -webkit-transform 0.4s; 

003 transition: transform 0.4s; 

004 -webkit-transform-origin: 50% 50%; 

005 transform-origin: 50% 50%; 

006 } 



acceleration the preserve-3d is set. 

001 .offscreen-nav { 

002 position: absolute; 

003 height: auto; 

004 font-size: 2em; 

005 top: 50%; 

006 -webkit-transform: translateY(-50%) ; 

007 transform: translateY(-50%) ; 

008 -webkit-transform-style: preserve-id; 

009 transform-style: preserve-id; 

010 left: 25%; 

011 } 

012 



Finish the menu items 

The next CSS will give the hover a bright 
yellow colour to make it stand out against the red 
background. The background Is set in the effect-persp 
class to a red colour to match the logo in the page. The 
white page will rotate out to the right while the menu will 
animate in from the left on the red background. 

001 .offscreen-nav a: hover { 

002 color: #fff72f; 

003 } 

004 .offscreen-nav a { 

005 display: block; 



Ciosetherow 

When the container is swinging out, a class of 
'animate' will be added to it. This is the class that will 
actually contain the animation effect. As you can see, the 
animation rotates the interface on the y axis by 45 
degrees. Try and imagine that there is a pin in the top of 
the screen that rotates the page 45 degrees away from 
the yiew. 

001 .effect-persp. animate .container { 

002 -webkit-transform: translateZ(-1500px) 
translateX(100%) rotateY(-45deg); 

003 transform: translateZ(-1500px) 
translateX(100%) rotateY(-45deg); 
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< Top left> 

• The rollover for the mehu 
elemehts is set to yellow to 
bring a transition highlight 
colour to the interface 

<Topright> 

• The CSS controls the page 
rotating on the y axis so that 
It moves slightly over to the 
right and rotates 45 degrees 

< Bottom lef l> 

• The menu is in mid- 
transition as the page 
rotates out of the way and 
the menu fades in from the 
left of the browser window 



Project add-ons 



The project uses classie js. a 
lightweight class editor that 
saves using the whole of 
jQuery, it’s available from 

github.com/desandro 
/classie. 



Second row of columns 

I The actual links are positioned off the screen to 
the left so the translateX CSS transform is applied to keep 



001 .effect-persp. animate .offscreen-nav a { 

002 opacity: 1; 

003 -webkit-transform: translateX(0) ; 

004 transform: translateX(0) ; 

005 } 

^ Start the JavaScript 

I "t Open the file twistjs and you will see that it is an 
empty document ready for us to begin. This tutorial is 
using the classie.js external library for adding and 
removing classes with JavaScript to CSS. In this function 
the code returns how much the page has scrolled. 



006 'OTransition' : 'oTransitionEnd' , 

007 'msTransition ' : 'MSTransitionEnd' , 

008 'transition': 'transitionend' 

009 }, 

010 transEndEventName = transEndEventNamesl 
'transition' ], 

011 docscroll = 0; 

Initialise the interface 

I Most applications have an init function to 
initialise all the things that are necessary. The first part of 
this function will get a reference to all the necessary 



them 150 pixels off the screen to the left. These are 
animated in from a transparent opacity, in the next step 
they’ll be given full opacity to be fully visible to the viewer 

001 .effect-persp .offscreen-nav a { 

002 opacity: 0; 

003 -webkit-transform: translateX(-150px) ; 

004 transform: translateX(-150px) ; 

005 -webkit-transition: -webkit-transform 0.4s, 
opacity 0.4s; 

006 transition: transform 0.4s, opacity 0.4s; 

007 } 

008 



001 function scrollY() { 

002 return window. pageYOff set || docElem. 
scrollTop; 

003 } 

004 

Setting variables 

The next part of the code sets out some 
variables that are needed in the code. The biggest 
section is an object containing the browser prefix names. 
These are used to check when the transition has ended 
by dynamically adding an event listener to the transition 



elements in the DOM so that these can be manipulated 
through the code without having to continuously 
traverse the DOM. 

001 function init() { 

002 var showMenu = document. getElementById( 

' showMenu ' ) , 

003 twistWrapper = document. getElementById( 
'twist' ), 

004 container = twistWrapper. querySelector( 
'.container' ), 

005 contentWrapper = container. querySelector( 
'.wrapper' ); 




Final CSS 

Finally the menu is brought onto the screen 
with the full opacity for each menu element. Save the 
style.css now because it has been completed. There 
won't be anything to see in the browser though because 
there is no functionality added to the page yet. That will 
come next by applying the CSS classes with JavaScript. 



later in the code. 

001 var docElem = window. document. 
documentElement, 

002 support = "transition", 

003 transEndEventNames = { 

004 'WebkitTransition' : 'webkitTransitionEnd' , 

005 'MozTransition' : 'transitionend', 



Show the menu 

Here the menu button is detected for when a 
user clicks on it The click event fires the remaining 
function, which is only partially shown in this step. The 
event is stopped from propagating and the default action 
of the button is also prevented. This enables the code to 
run without default actions interfering. 
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Home 
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B 



Blot 

Portfolio 

Contact 

About 



< Above> 

• The final design works on a variety of different 
screen sizes, with the menu being placed in the 
space available 



001 showMenu.addEventListener( 'click', 
function( ev ) { 

002 ev.stopPropagationO; 

003 ev.preventDefaultO; 

004 docscroll = scrollY(); 

005 



Bootstrap is the most popular HTML, CSS, and JS framework for 
developing responsive, mobile first projects on the web. 



Oowmiood Bootstrap 



asana. 




Integrate the menu 



This menu could easily be implemented with a responsive framework such as Bootstrap or Foundation as an 
alternative to their respective menus. Remember that each of those frameworks give you a custom download of what 
is available, you don’t need the whole framework. As such, you can leave out the existing menu that comes with those 
frameworks and add your own. Doing this is a great way of customising and making the design look less like an existing 
framework because those menus are very obvious. Custom web design menus will always create a more appropriate 
look for your web projects and with so many responsive frameworks, it’s almost possible to take the best parts of each 
to kick-start your own work. 



Finish the image 

The rest of the function is shown here. The 
scrolling is set to stop at this point as the class of 'open' is 
set to the twistWrapper element. Just marginally after 
this, triggered by the setTimeout command, another 
class is added called the 'animate' class and this therefore 
starts the animation. 

001 contentWrapper. style. top = docscroll * -1 + 
'px'; 

002 document. body. scrollTop = document. 
documentElement.scrollTop = 0; 

003 classie.add( twistWrapper, 'open' ); 

004 setTimeout( function() { classie.add( 
twistWrapper, 'animate' ); }, 25 ); 

005 }); 

006 

Return the menu 

The container gets an event listener added to it, 
which also detects input from a click. This should only 
fire if it has the 'animate' class already added to it 
because that means it's actually open and needs to go 
back when clicked, otherwise it won't fire. 



001 container. addEventListener( 'click', 
function( ev ) { 

002 if( classie.has( twistWrapper, 'animate') ) 

{ 

003 var onEndTransFn = function( ev ) { 

004 if( support && ( ev. target. className !== 
'container' || ev.propertyName. indexOf( 
'transform' )==-!)) return; 

Remove the event 

If the transitions have finished then the 'open' 
class needs to be removed, which makes sense as the 
menu isn’t open any more. At this point scrolling is 
returned to the user so that the page can carry on like a 
normal web page under the control of the user. 

001 this. removeEventListener( 
transEndEventName, onEndTransFn ); 

002 classie. remove( twistWrapper, 'open' ); 

003 document. body. scrollTop = document. 
documentElement.scrollTop = docscroll; 

004 contentWrapper. style. top = '0px'; 

005 }; 

006 



Removing the animate ciass 

Similar to the previous step the twistWrapper 
has an event listener added that detects that the 
transition has finished. When it does it removes the class 
of 'animate' as this is no longer applicable to it Just the 
final finishing off of the init function is left 

001 twistWrapper. addEventListener( 
transEndEventName, onEndTransFn ); 

002 classie. remove( twistWrapper, 'animate' ); 

003 } 

004 }); 

Finish off 

Add the final code and bracket to close off the 
init function. The final line calls this function so that the 
previous code is applied. Now save this JavaScript and 
open the index.html page in your browser to see the 
menu open and close while the transition takes full effect. 

001 twistWrapper. addEventListener( 'click', 
function( ev ) { return false; } ); 

002 } 

003 init(); 
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TUTORIAL 

OBJECTIVE 

Give your blog a great 
pop'Up animated effect 

TIME REQUIRED 



Master animated 
pop-up effects 



CREATE THIS AWESOME EEEECT THAT WAS INSPIRED BY 
WWW.PINKANOVA.COM 




AVIDEO PRODUCTION 
COMPANY, Pinkanova is based 
in Toulouse in the south-west 
■= of France. With the European 
headquarters of intel and world-renowned 
university located nearby it's certainly 
not a bad place to have your 
company’s headquarters. 

Pinkanova is the epitome of the digital 
native. Many video companies are catching up 



with what can be achieved digitally 
with video but all too often the 
results look like after thoughts. 
Where Pinkanova distinguishes 
itself is in the integration of 
digital elements, with the 
creation of fun, memorable and 
engaging sights into exciting 
new worlds where the real and 
virtual co-exist. 



Pinkanova created the 
designs, but the technical 
build was completed by 
Toulouse-based agency Glue 
Design. You’d struggle to find 
better words to describe their 
work than their strapline: 
‘passion, rigour, envie, 
innovation, creative, 
emotion’. 




Fullscreen video 

As a video production 
company, the fullscreen video 
background rightly takes 
centre stage. With each visit, 
the home page alternates 
between two videos to keep 
the site fresh 



No loops 

The video plays once and 
ends leaving the last 
frame on display. This 
removes the need for a 
tricky loop and ensures 
the video doesn't 
become annoying 



Frame rate 

The animated frames are 
contained with a PNG and 
played at about half the 
rate of a typical video, so 
it's a little jerky. This 
technique can be adjusted 
to suit you 



Console bar 

The site features an attractive 
and functional console that rises 
up wheh you select Follow Us. 
The simple horizontal movement 
of the cohsole bar hides the 
social icons as the console 
opens, adding sophistication 



Subtle suggestion 

The 'Why Trust Us?' ahd 
'Why Use Video?' links 
move slightly, and the 
user is treated to a 
Jack-in-the-box style 
animated sequence when 
they mouse-over 
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Attention grabbing 



Q Inspiration 

The home page's actors break 'the 
fourth wall' by looking Into your world 
just as you look Into theirs. The site 
makes use of moving Images but It 
would become tedious If It was all 



wall-to-wall video. For the key 
navigation on the home page, they 
have brought back to life the 
old-school, frame-by-frame technique 
used in animated GIFs and flipbooks. 



Used here as a pop-up effect and all 
achieved using CSS, this code-light 
technique provides plenty of scope for 
you to really unleash your animation 
skills and create your own effects. 



^Sllechnique Easy on the code 



m The head 

For the purposes of the workshop, a fullscreen 
image is used and loaded by linking the background 
stylesheet. This is achieved by assigning a background 
image to the HTML. Here the background-size keyword 
'cover' is used. This scales the background image, 
preserving the original aspect ratio so that the 
background is completely covered. 



001 <!DOCTYPE html> 

002 <html> 

003 <head> 

004 <meta charset=”utf-8"> 

005 <title>Animated Popups</title> 

006 <link rel=''stylesheet" type="text/ 
css" href="styles/background. css"> 

007 <link rel=”stylesheet" type="text/ 
css" href="styles/popups. css"> 

008 </head> 



The body 

The two pop-ups are contained within a <div> 
with the class 'main'. Each of the pop-ups sits within its 
own <div> 'left' and 'right' and the graphics themselves 
are displayed by assigning appropriate classes to the 
links, in this case for 'men' and 'women' retrospectively. 
The link text is hidden using CSS. 



001 <body> 

002 <div class="main"> 

003 <div class="left"xa class="men" 
href="#">Menswear</a></div> 

004 <div class="right"xa class="women" 
href="#">Womenwear</ax/div> 

005 </div> 

006 </body> 

007 </html> 



002 max-width: 800px; 

003 min-width: 620px; 

004 margin: 150px auto; 

005 } 

006 .left { 

007 float: left; 

008 } 

009 .right { 

010 float: right; 

011 } 

012 



f\A The pop-ups 

The graphics for the pop-up are background 
images, so the links are set to display as block elements 
at the appropriate height and width. This workshop 
avoids the increasingly disavowed negative text-indent 
technique to hide unwanted text, instead opting for the 
Zeldman-approved Kellum Method (no longer used by 
Scott Kellum. who now prefers custom font sets). 



001 a { 

002 

003 

004 

005 

006 

007 

008 } 

009 .men { 

010 

men. png); 



011 } 

012 .women 

013 



women . png) 
014 } 



display: block; 
height :400px; 
width: 300px; 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 



background: url( .. /images/ 



{ 

background: url( .. /images/ 



The container 

The main class provides a container for the 
two pop-ups. Max-width and min-width are used to 
provide an element of responsiveness in the layout, but 
you will undoubtedly need to create your own container 
styling to meet the needs of your own page. The float 
property is used to position each pop-up <div> at the 
far-left and far-right of the container <div>. 

001 .main { 



The animation 

The pop-up graphics are comprised of 
eleven frames, each occupying a 300px-wide area. 
In order to animate the pop-up, it is simply a case 
of stepping through each of these frames by 
moving the graphic left ten times (eg 3000px/10 = 
300px steps) to the last frame. If you want to use 
a different number of frames, all you need to do is 
ensure that the step distance matches the width of 
each frame. 





Technique 

Heavy on 
the graphics 

You can add extra pop-ups by creating a 
new class specifying the new image as its 
background. It's worth spending time 
getting the graphics right, but keep an eye 
on the file sizes you are generating. 




m Choose your Style 

If you are going for a video style, 
you may want to shoot some video or use a 
camera with a high burst rate to take some 
original footage. You'll need to remove the 
background if you want a non-rectangular 
look, keep this in mind when shootingl 




Create your canvas 

In Photoshop, open a new file with 
the height of your animation. The width will 
be the number of steps times the width of 
the frame. Set your ruler to pixel units and 
add guides at the start of each frame. 





Lose the 
background 



Remove the background in your raw 
footage. Then, copy the result into the 
multi-frame graphic. Repeat this until done 
and tweak the PNG optimisation options 
until happy. Save and you're donel 
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Create a rotating 

S product viewer^ 

DISPLAY YOUR PRODUCTS FROM EVERY ANGLE WITH A ROTATING PRODUGT j 1 
VIEWER, AS SEEN ON NUABIKES.GOM ^ 

[ 



r* 










n 




Signposted URL 

Getting sales for the bike is key 
so a large pre-order label in the 
top-right of the screen will 
always provide access to it 



Fixed menu 

The menu is fixed into 
position on the left side of 
the screen and remains in 
place as the rest of the 
page is scrolled through 



Fuiiscreen photos 

The photography is key to 
this site and the large, 
fullscreen images provide 
a way to view the bike from 
different angles ^ 








Fluid sections 

The page is a one-page site 
that enables the user to 
scroll down each section or 
use the menu on the 
left-hand side 



Pausable scroll 

The right-hand navigation 
controls the images and 
the user can click on the 
image, pause it or watch it 
from different sides 
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NUA BIKES PRODUCE an elegant and clean 
urban bike that has a minimal impact on the 
environment due to the simplicity in its 
*=r design. The bikes are handcrafted and reflect 
the conscious commuter who needs to get around 
urban environments with ease. The company website 
needs to reflect the style of the bike, which is always 
easy to do with photography when the product is 
strong. The home page features a fullscreen image of 
the bike that has been photographed from different 
angles so that the user can see the bike rotating on 
screen automatically so the viewer can see the design in 
detail. When the product has such clean, elegant lines 
and is made from quality materials such as titanium, 
carbon fibre and aluminium, then it is important that the 
styling of the site reflects the construction aesthetic. It is 
so easy for designers to get carried away by adding 
more and more complex content to sites but sometimes 
all that is needed is good typography, navigation, simple 
colour and the product itself. Organising the content can 
be tricky, but the Nua Bikes site has managed to do this 
without overstating the simplicity of the design. See how 
to get the function for yourself 




Add the images 

To create a rotating image of a bike, we need to 



add five images to the body section of the page. Using 



jQuery a simple Image rotator can be created which moves 



the image on every few seconds. 



001 

002 

003 

004 

005 

006 
007 



<div id=''fader'’> 

<img src=''img/bikel.png"/> 
<img src=''img/bike2.png'V> 
<img src=''img/bike3.png'V> 
<img src=''img/bike4.png'V> 
<img src=''img/bike5.png'V> 
</div> 



010 height: auto; 

011 } 

012 </style> 



Library link 

The images have to be hidden and positioned 
on top of each other, so a link to the jQuery library is 
needed. This will aid the adding and removing of CSS to 
make each of the images appear at the appropriate time. 



001 <script src="https://code. jquery.com/ 
jquery- 

002 2.1.3.min. js"x/script> 



r\A Move through the images 

After the IlnktothejQuery library the following 
code can be added. This hides all the images except the 
first one. They are positioned within the div tag so that they 
will be in the right position when they are called to fade in 
with the code in the next step. 



001 <script> 

002 $(function() { 

003 $('#fader img:not(:first) ') .hide() ; 

004 $('#fader img') .css ( 'position' , 
'absolute'); 

005 $('#fader img').css('top' , '0px'); 

006 $('#fader img').css('left' , '50%'); 

007 $('#fader img').each(function() { 

008 van img = $(this); 

009 $( '<img>') .attr( 'src' , $(this). 
attr( 'src')) . 

010 load(function() { 

011 img.css('margin-left' , -this. width / 2 + 
'px'); 

012 }); 

013 }); 



Style the images 

Now move to the head section of your page and 
add the style tags for the div tag that holds the images. This 
simply positions them relatively so that the JavaScript can 
change the images later on. 

001 <style> 

002 html, body{ 

003 height: 100%; 

004 background-color: #T0f0f0; 

005 padding: 20px; 

006 } 

007 #fader { 

008 position: relative; 

009 width: 100%; 



Switch images 

The 'fadeNexf function does the hard work of 
fading out the old image while fading in the next This is 
called every three seconds by the set interval, which in turn 
calls the fadeNext function. Save this now and test it in your 
browser to see the images appear on the screen. 

001 function fadeNext() { 

002 $('#fader img').first().fadeOut(). 

003 appendTo($('#fader')); 

004 $('#fader img').first().fadeln(); 

005 } 

006 var rotate = setinterval (fadeNext, 3000); 

007 }); 

008 </script> 





Sometimes all that is needed is good 
typography, navigation, simple colour and the 
product itself 
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154 Google Analytics 

Get the low-down on how to interpret 
your stats and improve site traffic 



160 Speed up WordPress 

Use Varnish software to boost the 
performance of your site 



164 Create a single input 3D 
form with CSSS 

Add a 3D form to your WordPress site to 
let people sign up to your site 



168 Design layered 
backgrounds in 
Photoshop 

utilise your Photoshop skills to create a 
fabulous layered background 



172 Create an eCommerce 
web element with CSSS 

Make money from your website by 
turning it into a web shop 



€€ Selling online 
allows businesses 
to reach out to 
huge markets W 



Beyond WordPress 



Take your blog to the next level 
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Beyond Word Press 



GOOGLE 

ANALYTICS 

GOOGLE ANALYTICS IS THE MOST WIDELY USED WEB ANALYTICS SERVICE IN THE 
WORLD AND IT'S FREE. FIND OUT THE MOST IMPORTANT PARTS OF THE DATA TO 
STUDY AND MASTER KEY FEATURES TO GET MORE HITS FOR YOUR SITE 




at, and what you can do to get 
them to stay longer ff 
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Know your audience 



Your first port of call for getting insights into your audience and visitor behaviour 
should be the Acquisition>AII Traffic Channels report 



|he Channels report enables you to see at a 
glance where your visitors are coming from 
according to Google's rules. Not all your traffic 
will be captured by Google automatically, specific 
traffic such as Email will not automatically go under the Email channel. 
Google uses their Direct channel as a catch-all mechanism for traffic 
that it just cannot categorise in any of its other channels. So it's important 
that you familiarise yourself with the UTM tags in order to make sure all 
campaigns you are running are accounted for. 

To understand how Google uses these tags, it's Important to get familiar with the 
concept of source - this could be Google, Bing, Facebook; and the concept of medium - 



for example, paid search CPC, organic and so on. Google then uses rules 
based on these dimensions (not restricted to the ones mentioned) to define 
their channels. 

For example the organic search channel is defined by all traffic that has a 
'medium' exactly matching 'organic'. 

The default channel grouping Google provides to you would cover most 
business' needs, but if you think you need a custom channel, Google 
enables you to create custom groupings based on these specific needs of 
yours. Just like the default ones, the custom channels are based on rules 
that you will have already defined in the interface utilising dimensions set 
out by Google Analytics. 



Understand key metrics 

Get to grips with the terminology used in the Google Analytics interface 



Channels 

Google's Default channel grouping splits traffic into 
eight groups and these are: Direct, Organic, Referral, 
Paid Search, Other Advertising, Email, Social and 
Display. You cannot change how these channels are 
defined but Google may evolve them in future. By 
using these groupings you will be able to clearly 
review visitor behaviour from a particular source 
and determine the channel's effectiveness without 
being muddled up by another channel. 

UTM tags 

If you're planning some activity that will drive traffic 
to your site - email or social for example, it's key that 
you identify this traffic and make sure you can 
understand and measure the yield of your efforts. 
Google uses custom campaign parameters called 
UTM tags to enable you to identify each piece of 
activity or 'campaign'. For example, these identifiable 
activities can include the source, the keyword or 
term used, the content and ads or the specific name 
of a brand. By tagging the links to your posts, for 
example In an email newsletter, you can ensure that 
this traffic is correctly identified as it comes through. 
Google has a handy URL builder tool that makes it 
very easy to identify the most effective URLs. 

Real-time 

Once you have tagged your campaign URLs you 
can test everything is working as it should be by 
looking at the Real Time analytics report by going to 
Real Time>Trafflc Sources. By clicking through to 
your site using your newly tagged link, you should 
see this visit showing the correct medium and 
source In the report if you've done this right. You will 
then be able to monitor spikes and trends as they 
happen on your website. 




Sessions 

The number of periods in which any 
user interacts with your website. If a 
user leaves the site and returns after 
30 minutes or more, a new session 
is recorded. 

Users 

This is the number of unique users 
who have visited your site for at 
least one session during the 
selected date range. 

Bounce rate 

The proportion of total sessions 
which consist of only a single 
pageview being generated before 
the user leaves your website. 



Pageviews 

The total number of page 
impressions during user sessions 
within the selected date range. 

Explaining 

relationship 

A session consists of a grouping of 
one or more pageviews or other 
interactions which take place on 
your site. A session ends once a 
user has been inactive for 30 
minutes, or leaves your site and 
returns via a different channel. 

In-page analytics 

Accessed from the Behavior 
section, In-Page Analytics offers 



insight into how users navigate 
around your site. A live website 
overlay indicates the proportion of 
clicks made from any page to each 
linked page, enabling you to 
establish the most popular paths 
taken to explore your content. 

Audience behaviour 

The Audience>Behavior report 
reveals how loyal your visitors are 
and how often they return to the 
site. It's possible to compare the 
behaviour and performance of new 
versus returning visitors and also 
see the number of sessions each 
user generated during the selected 
date range. 
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Best new features 

Google Analytics is regularly updated with new features and reports. Here are some 
recent additions that you need to know about 



Spreadsheets add-on 

This handy Google Analytics add-on for Google 
Spreadsheets enables easy access to your data via 
the Analytics API. It's possible to build your own 
reports that query multiple Analytics views and 
manipulate the returned data. With a little setup 
you can create your own regularly updated 
custom dashboards merging Analytics data with 
any other measurements and making use of the 
Google Spreadsheets charts in order to visualise 
the results. 



Audience groups 

Google's Doubleclick advertising technology 
collects anonymous information about web surfers 
and shares this in Google Analytics. This enables 
you to discover more about who is actually using 
your website. It's possible to view an estimated age 
and gender breakdown of site visitors, user 
affinities and the products and services users are 
seeking through In-Market Segments. Your 
audience can be segmented by these filters to 
enable you to find your most valuable user types. 



Cohort analysis 

Currently in beta and rolling out across Google 
Analytics accounts. Cohort Analysis splits your 
audience into distinct groups. These are based on 
a particular behaviour or attribute and enables 
deeper level analysis. There is no such thing as an 
'average user' and at present much analysis does 
not distinguish between differing behaviours, 
instead bundling all users into a single pot Each 
grouping, or cohort, shares common 
characteristics and new trends may be unearthed. 






Content Experiments 

Content Experiments enables easy webpage 
split-testing which can help when working towards 
improving the performance of your website. When 
setting up a content experiment you must define a 
goal or conversion metric for which you are 
looking to enhance. Eor example, an eCommerce 
site could monitor revenue or the total number of 
transactions, whilst a lead generation site could 
look to increase the number of overall completed 
form fills. 



Benchmarking 

The Audience Benchmarking reports enable your 
performance to be compared against aggregate 
data from other sites of a similar size in the 
industry and country. You'll be able to see how 
your traffic sources and engagement metrics 
compare to other sites In the sector and discover 
areas where you outperform your competitors and 
those where you underperform. To access 
benchmarking reports you need to agree to share 
your data anonymously with Google. 



Intelligence Events 

Intelligence Events are a commonly overlooked 
feature. Analytics continuously checks for metrics 
that have seen statistically significant variations 
over recent days or weeks and highlights these 
anomalies. Intelligence Events help to surface any 
unexpected changes which could been indicative 
of a problem or a success on a particular page. It's 
also possible to set up automated email or text 
alerts which are triggered when a particular metric 
changes outside a defined threshold. 



Plan your content 

When it comes to creating content for your audience, 
making a decision can take up time. Luckily, it doesn't 
have to be this way. 

Best performing existing content: pageviews 

Use the 'All pages report' to check your most popular 
posts. If one topic outstrips the others in terms of 
pageviews then see if you can address another aspect 
of the same topic. 

Most engaging existing content: time on page 

If you find an unusually high time spent on a post then 
write another with a similar angle, and interlink for the 
same effect. Use 'All pages report' again to find this out. 

Internal site search 

This one is straightforward. Found in the Behavior tab, 
the site search lets you know what your visitors have 
been looking for within your website. 

Affinity Categories 

The Affinity Categories report can reveal visitors' 
interests. Including a post on a related interest and 
referencing effectively can provide new engagement. 




Demographic reports 
w I can be viewed to reveal 
your visitors' data, including 
aspects like their gender split and 
age groupings. 



User Affinity Categories 
can give insight into 
what else your users do online. 
Affinities reveal a more detailed 
interest breakdown. 



The In-Market Segments 
report highlights areas 
of commercial intent in which 
your users have expressed a 
degree of interest. 
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Customise the Google Analytics Ui 



Intelligence Events 
and custom alerts 

GA generates automatic web alerts 
whenever there is a significant change in 
usage or traffic metrics. It can generate 
AdWords alerts in the GA interface if 
your accounts are linked. You can also 
set up custom alerts to be generated 
when traffic reaches or decreases to a 
certain threshold. Google enables you to 
receive these alerts via email or text 
message so that you can stay in the 
know even though you are not checking 
your GA reports. 

There are four reports Google has 
available in terms of Intelligence Events: 
Overview. Daily Events, Weekly Events 
and Monthly events. 

There are also some useful alerts you 
can set up like, if revenue drops by 10 
per cent, if a landing page's bounce rate 
increases by 20 per cent, or if a PPG 
campaign performance increases 
revenue by 10 per cent, for example. 



Custom dashboards 

The usefulness of GA goes beyond the 
standard reports they provide - the 
interface is completely customisable and 
enables you to create bespoke 
dashboards and reports to match your 
needs. While most of the default 
dashboard provided out of the box may 
suffice, there are countless widgets you 
can create to really enhance your data 
analysis. Along with this, Google provides 
a great dashboard, report and segment 
repository called the Solution Gallery - a 
crowdsourced area where Google 
Analytics users publish their own 
dashboards, reports, anything that they 
have found useful for the benefit of 
fellow GA fans. This is a great shortcut 
and a brilliant resource too as the 
uploaded shortcuts are rated with stars 
by other users. You can download any of 
these premade dashboards to your own 
account and start using them straight 
away for your own site analysis. 



Custom reports 

Just like custom dashboards, GA enables 
you to create custom reports that are 
very powerful for drilling down into your 
site data. Here you will get to choose and 
select only the dimensions and metrics 
that you want to display. This is so that 
you can easily and quickly access the 
data relevant to you without spending 
ages clicking around in Google Analytics 
each and every time you want that kind 
of specific data. 

Google's help section is very useful 
here as it has a handy list of all the 
dimensions and metrics that GA uses, 
and also gives hints on the valid 
dimensions or metrics combinations as 
not all of them can be queried together. 

As mentioned, the Solutions Gallery 
has a large repository of well-made, 
crowdsourced custom reports from 
other Google Analytics users that you 
can easily download, utilise and 
customise for your website's needs. 



Automated emails 

It's very easy to set up GA so that it can 
send you customised reports via email 
at a frequency that suits. This will then 
save you from having to go in and 
generate them each time and ensures 
that you are comparing like-for-like each 
week or month. These emails also act as 
a handy prompt to go in and have a 
further dig around in your Google 
Analytics data so that you're always on 
top of the latest trends on your website. 
Intelligence Events reports can also be 
set up to alert you with an email when 
certain criteria are met. If set up correctly 
these can be utilised as an extremely 
useful warning system that will alert you 
to problems with your site or server that 
may need urgent attention, like if the 
bounce rate or page load time has 
increased significantly for example. 
Alternatively, the reports can be set up to 
make you aware of large traffic spikes 
that may warrant further investigation. 
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Internal site search 

If your site utilises an internal search 
function to display a filtered selection of 
products or list of related articles, GA can 
track and report on this data. The Site 
Search report, accessed under the 
Behavior section, provides details of the 
most commonly searched for keywords 
and the pages from which users make 
such queries. 

A quick look through these terms will 
enable you to identify the content that 
users are actively seeking on your site. If 
this content exists, its prominence 
should be improved, if not, you have a 
list that is all ready to go with 
suggestions for future content additions. 

Search queries 

Connecting your Google Webmaster 
Tools account to Google Analytics 
enables Webmaster Tools' off-site data to 
be combined with the on-site data in GA 
and unlocks the Search Engine 
Optimisation series of reports. The most 
useful of these reports, 
Acquisition>Search Engine 
Optimisation>Queries, lists the different 
Google search queries for which your 
site has appeared in results. The data 
returned shows an estimate of the 
number of times your site was shown for 
each query as well as the average 
ranking position and click-through rate. 

With most keyword referral data now 
reported as not provided, this report can 
give you visibility on the search terms 
that are sending traffic. 

Pinpoint the best 

As well as identifying pages that are 
performing below par, it's important to 
understand and learn from the success 
of your best performing content. If you 
can identify common themes in this 
content then similar content could be 
developed to bring in more traffic. The 
Behavior>Site Content>Landing Pages 
report reveals details of the sessions 
which result from a user landing via a 
certain channel. Ecommerce and goal 
conversion data can be particularly 
insightful here as after landing on a 
particular page, users may go on to 
explore your site and convert at a 
different URL. It's possible that a page 
with a low average time on page may in 
fact be extremely valuable, for instance a 
category page which funnels users to 
products they then go on to purchase. 



Determine 
the issues 

Identify your poor-performing pages 
via presentable data 

Bounce rate 

Pages that record having a high bounce rate are usually an indication that the 
content is not what the user expected to find. On eCommerce websites, product 
pages frequently have high bounce rates as users may land on them from a 
search engine when looking for a particular product. It is possible to decrease 
bounce rate on these kinds of pages by ensuring that all possible related 
products are interlinked. 

A page that records a bounce rate significantly greater than other pages of 
the same type should be investigated further. 

It's also possible to view bounce rate by channel, which may reveal that users 
from social platforms are interested primarily in a single piece of content and 
less in exploring the rest of your site. 

Time on page 

As well as recording average session duration, GA also reports on the average 
duration of pageviews of each individual URL on your site. Pages can easily be 
sorted by the average time on page metric, and this can be accessed through 
Behavior>Site Content>AII Pages to reveal the pages where users are leaving 
quickly. This data suggests that users do not find these pages engaging enough 
to stay on. 

The Content Drilldown report aggregates page-level metrics by a site's URL 
directory structure, which can quickly highlight particular subfolders such as 
product categories that are under-performing. 

Low converting pages 

If you've set up eCommerce or goal-tracking then Google Analytics will be able 
to report on a true monetary value of a page. Selecting the eCommerce option 
at the top of Behavior>Site Content>Landing Page will reveal a report on the 
number of sessions, transactions and revenue that has been generated through 
visitors who have landed on a particular page that you want to analyse. It's also 
possible for you to view the average order value, eCommerce conversion rate 
and per-session monetary value for that particular landing page, which can flag 
up any poor-performing pages for your attention. This will then enable easier 
fixing later on. 

Selecting a Goal Set option at the top of the same report enables conversion 
rates for different predefined goals to easily be compared. 

Pages with low click-through rates 

The Acquisition>Search Engine Optimization>Queries report can highlight pages 
which rank highly in search results but aren't delivering much traffic. It will 
identify a troublesome query, for which your site occupies a high average 
position but has a low click-through rate and this will suggest that your listing is 
not as enticing as other competing sites at encouraging searchers to go ahead 
and click through to your website. 

You can effortlessly improve upon this by updating webpage title tags and 
meta descriptions to ensure they contain the related search query and a strong 
call to action. This is a quick-and-easy optimisation that should increase 
click-through rate and result in additional traffic. 






If you’re not 
a regular Google 
Analytics user, 
spending just 
half an hour or so 
looking through 
the reports could 
reveal some easy 
opportunities to 
boost traffic f » 
Philip Gamble 

Technical SEO manager, Eound 




The Users 
Flow report is 
an overview of 
your best and 
worst performing 
pages. It’s useful 
forgathering 
ideas on user 
journeys needing 
improvement f i 

Dora Moldovan 

Head of technology, Eound 
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PPC 

If you are running a PPC campaign, it's 
important that you understand whether 
the traffic that's being generated is 
money weli spent. By setting up goais 
in Analytics and assigning a monetary 
vaiue to those goais, you can quickiy 
estabiish the ROi on your PPC spend 
even if you aren't seiiing something. For 



exampie, a subscription to your maiiing 
list or a form submission can be a goal 
and assigned a vaiue. 

Remember that PPC traffic should 
always have clear objectives and 
be directed at the most relevant 
landing page on your website. This 
will also need to be via the keywords 
that you are already using in order to 
give it the best chance at converting. 



Social media 



i)OLI 

0 



Social media visitors have generally 
arrived with far less intenf to 
convert and have followed an 
interesting article or post that has 
led them to your site as opposed 
to an advert or offer. Understanding 
their behaviour, however, is no less 
important. Do they go on to read 



additional content on your site? Does a 
particular type of post generate more 
interactions than the others? Do they 
go on to find other content from your 
site and share that with their network of 
friends and followers? This information 
is invaluable for growing your audience 
and maximising fhe effectiveness of 
what you do for your site on social 
media and for building your brand. 



Tracking your conversions 

The best way to determine if your site is successful is by measuring your goals 



Once you set up the Google Analytics tracking code for 
your site, it's important to set up some conversion 
points for your site. Your business goals can vary - from 
tracking your online transactions to tracking whether 
someone has filled in your contact form, signed up to a 
newsletter or clicked to view a video. 

Defining your conversions in conjuncfion with your 
channel is key to your campaign success. For example, 
you may find that your paid search campaigns might 
be better at getting users to convert, whereas your 
social media campaigns might be better at creating 
awareness of your brand and is a better traffic driver. 
Define conversion points wisely and check your 
channels so you can understand your website and 
know where to channel your marketing efforts. 

Types of conversions in GA 

GA lets you set up different conversions for different 
needs. For example. Goals can be used for tracking key 
actions that occur on the site that usually reach a 
confirmation page, eg submitting a contact form, 
whereas Events is used to keep track of interactions 
that are actions typically tied in with page elements, like 
clicking a button. GA provides a powerful API to enable 
merchants to track their website sales. 



Goals 

Google Analytics goals represent completed activities 
and conversions that measure your business objective 
success. Flaving properly defined goals enables GA to 
provide you with great insights on the effectiveness of 
your website page design or marketing campaigns. You 
can define up to 20 goals per reporting view. 

GA lets you define your goals in several ways: 
Destinafion - where the goal is defined by reaching a 
specific page: Duration, a session that lasts a set 
amount of time or longer Pages/Screens per session, 
where your goal might be to make sure the users see 
an X number of pages per session: and Event, where 
you can set up a goal based on an event, and this is 
useful if you want that event to be part of an attribution 
model like video play. 

You can also define funnels for your goals and these 
are specific pafhs the users take to conversion. This is 
useful if you wanf to view where users abandon the 
funnel and where optimisation efforts should be spent. 

Events 

Events are user interactions that can be tracked 
independently from a page visit or load like video plays, 
AJAX content, button clicks and so on. The difference 



between goals and eyents is that while goals are 
counted once per session, events are counted once per 
interaction. So if someone plays a video five times in a 
visit, that would register as five events. If fhey submit a 
form twice, that would count as a single goal. It is 
important that this difference is understood and the 
goals and conversions are implemented accordingly. 

Another difference between goals and events is that 
the events need to be implemented programmatically 
via JavaScript code on the site, while goals can simply 
be defined in the GA interface. Using Google Tag 
manager makes goal implementation easy, so you 
should make sure that this is a consideration. 

Ecommerce tracking 

Based on information like products bought, 
transactions, and the time it takes for a user to purchase, 
you can get insights on your best-selling products or 
brands or categories, which channels are your best 
performers, your paid search ROI, and how long it takes 
customers to make a decision to purchase. 

You can set up eCommerce tracking 
programmatically, but many kinds of shopping cart 
software will include GA eCommerce out of the box or 
provide easy-to-install extensions. 
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Speed up 
WordPress 
with Varnish 
software 

INCREASE THE PEREORMANCE OE WORDPRESS USING 
VARNISH AND OPTIMISE YOUR CONTENT-HEAVY SITES 



TUTORIAL 

OBJECTIVE 

Use Varnish software to 
increase the performance 
of content-heavy sites 

TIME REQUIRED 

1 hourSO minutes 




NOBODY LIKES TO wait ages for a 
page to load. If your site is loading 
slowly people will just go somewhere 
else before they get to look at all the 
content on your site or read the great article you 
wrote. Page speed is still an issue for many sites, 
and recent studies show that 40 per cent of users 
will abandon your site if it takes more than three 
seconds to load. 

This is where Varnish comes in. Varnish is a HTTP 
accelerator or caching HTTP reverse proxy. It 
receives requests from clients and tries to answer 
them from the cache. If It cannot answer from the 
cache it will forward It to the origin server, fetch the 
response, store it in the cache and deliver it to the 
client. When Varnish has a cached response ready, 
it is typically delivered in a matter of microseconds: 
two orders of magnitude faster than the average 
origin server, so make sure that Varnish answers as 
much as possible from the cache. 

In this tutorial we will go through some of the 
common steps required to install and configure 
Varnish and integrate it with WordPress to take your 
site to the next level. 



Install Varnish 

Varnish packages are readily available for many Linux distributions including 
Red Hat. Centos, Debian and Ubuntu. In this tutorial we will assume that Ubuntu 14.04.1 
LTS as the underlying operative system and we'll be installing the latest version of 
Varnish. For other operating systems check the latest releases on varnish-cache.org/ 
releases. Open a command prompt and type the following as root. 

001 apt-get install apt-transport-https 

002 curl https;//repo. varnish-cache.org/ubuntu/GPG-key.txt | 

apt-key add - echo "deb 

https://repo.varnish-cache.org/ubuntu/ trusty varnish-4. 0” 

003 » /etc/apt/sources. list. d/varnish-cache. list 

004 apt-get update 

005 apt-get install varnish 

006 

Add the plugin 

After installing Varnish we need to instruct WordPress to purge the cached 
content whenever modified. There are several plugins to achieve this. In this tutorial we 
will use Varnish HTTP Purge. Go to the WordPress dashboard and click on Plugins>Add 
New and search for Varnish HTTP Purge. Click on Install Now and confirm. Finally 
activate it. 

Enable custom permalinks 

For the Varnish HTTP Purge plugin to work correctly we need to enable 
mod rewrite and use a custom URL structure for permalinks and archives. 

In the WordPress dashboard click on Settings>Permalinks and select Custom 
Structure. Then type /%year%/%monthnum%/%postJd% and click on Save Changes. 
To finalise, open a command prompt and run the following as root. 

001 

002 a2enmod rewrite 

003 



Move Apache 

Before we configure Varnish to handle all the web traffic to our WordPress 
site, we will need to move Apache to a different port. Let's then change all occurrences 
of port 80 with a text editor in /etc/apache2/ports.conf and any files under /etc/ 
apache2/sites-enabled/ to 8080. 

Serve from Varnish 

Now that port 80 Is available we can update the Varnish configuration, 
effectively putting it in front of Apache and WordPress. On the default installation 
Varnish will wait for connections on port 6081. With this in mind let's change /etc/ 
default/varnish with a text editor and replace 6081 with 80. 

001 DAEMON_OPTS="-a :80 \ 

002 -T localhost:6082 \ 

003 -f /etc/varnish/default. vcl \ 

004 -S /etc/varnish/secret \ 

005 -s malloc,256m” 

Set the backend 

Varnish uses the concept of backend or origin server to define where it 
should retrieve the content from If it's not present in its cache. In this case we will be 
using the Apache location that we defined in step 4. Edit /etc/varnish/default.vcl with a 
text editor and ensure the following is present. 

001 backend default { 

002 .host = "127.0.0.1"; 

003 .port = "8080"; 

004 } 

Make it effective 

Now we are ready to start Varnish and restart Apache. Once this is done, all 
traffic to our WordPress site will pass through Varnish before it hits the Apache server. 
Open the command prompt again and run the following as root. 
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001 service varnish start 

002 service apache2 restart 

Ignore cookies 

By default Varnish will not cache content for requests including the Cookie 
header or responses including the Set-Cookie header. WordPress sets many cookies 
that are safe to ignore during normal browsing so let's update 
/etc/varnish/default.vcl and add the following inside vcl jecv to remove them. 

001 set req. http. cookie = regsuball(req. http. cookie, "wp- 
settings-\d-r=[^;]-r(; )?", 

002 set req. http. cookie = regsuball(req. http. cookie, "wp- 
settings-time-\d-r=['';]-r(; )?", 

003 set req. http. cookie = regsuball(req. http. cookie, 

004 "wordpress_test_cookie=[^;]-r(; )?", 

005 if (req. http. cookie == { 

006 unset req. http. cookie; 

007 } 

008 

Exclude URLs 

In most web applications there are some URLs that shouldn’t be cached no 
matter what and WordPress is no exception. We will be excluding any admin or login 
related pages from hitting the cache. Once again open /etc/varnish/default.vcl and add 
the following before we remove the cookies from the previous step. 



001 if (req.url ~ "wp-admin|wp-login") { 

002 return (pass) ; 

003 } 

Extend caching 

Varnish uses the max-age parameter in the Cache-Control HTTP header to 
establish how long the content is considered fresh before contacting the backend 
again. Varnish will use 120 seconds by default if this yalue is missing or is equal to zero. 
To extend this period to one hour we could update /etc/varnish/default.vcl. 

001 sub vcl_backend_response { 

002 if (beresp.ttl == 120s) { 

003 set beresp.ttl = Ih; 

004 } 

005 } 

Handle purge requests 

Whenever existing content in WordPress is updated the Varnish HTTP Purge 
plugin will ask Varnish to remove it from the cache. The next time it's requested, the 
most up-to-date version will be retrieved from the backend. But in order to do this we 
will need to add the following at the top of vci recv in /etc/varnish/default.vcl. 

001 if (req. method == "PURGE") { 

002 if (req. http. X-Purge-Method == "regex") { 

003 
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Varnish Book 

Varnish has also released an 
entire PDF document detailing 
how to utilise the software to its 
full potential, including sections 
on HTTP protocols, VCL basics 
and threading parameters. 
Check it out at 
bit.ly/lzlalPk 



003 ban(”req.url ~ ” + req.url + ’’ && req. 
http. host ~ ” + req. http. host); 

004 return (synth(200, "Banned.")); 

005 } else { 

006 return (purge); 

007 } 

008 } 

009 

Secure purge 

I In the previous step we added the necessary code to handle purge 
requests but we have left it open for anyone to do just that. Let's add some 
code to restrict it. Edit /etc/varnish/defaultvcl and after the backend add the acl 
below using your server IP address or hostname. Then modify the code in the 
previous step to use it. 

001 acl purge { 

002 "localhost" ; 
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003 "<server ip address or hostname>" ; 

004 } 

005 . . 

006 if (req. method == "PURGE") { 

007 if (client. ip !~ purge) { 

008 return (synth(405)) ; 

009 } 

010 



001 

002 varnishlog 

003 




Volume matcher/measure 

Varnish is very powerful but can be daunting at first Luckily for us there are 



many resources online and has an active community behind ready to help. If you are 



stuck or want to know more you can visit the Varnish website at varnish-cache.org. 



^ O Reload the configuration 

I Before our changes to /etc/varnish/default.vcl take effect. Varnish needs to be 
told to reread its configuration. To avoid any potential downtime. Varnish can be 
instructed to reload the configuration while it keeps serving requests. Open the 
command prompt again and type the following as root. 



001 

002 service varnish reload 

003 



A Empty the cache 

I "t Chances are that as we worked our way through the configuration, some 
content found its way into the cache even if it wasn't supposed to. In this situation we 
can use the Varnish HTTP Plugin to empty the cache and then we can start afresh. Go 
to the WordPress dashboard and click on Purge Varnish at the very top. 

A C Examine the traffic 

I Everything is working; browse some pages, login, logout, pages are loading 
fast. Or are they? Varnish come with a set of tools that will help you understand what's 
going on behind the scenes and debug any potential problems. To see the requests as 
they are passing through Varnish run the following on a command prompt: 



Go further 

I # If you are interested in Varnish, you can always give Varnish Plus a go. There's 
a free trial available on the Varnish website (bit.ly/12hJpx8) and you can capture 
real-time traffic statistics, create a paywall for premium content, simultaneously work on 
administration across all Varnish cache servers, record relationships between web pages 
for easy content maintenance, detect devices used for browsing and accelerate API. 
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Code an 
input form 
in 3D with 
CSS 

IF YOU HAVE LIMITED SPACE BUT WANT TO 
CAPTURE INPUT WITH MAXIMUM STYLE, THIS IS 
THETECHNIOUEFORYOU 



^ 

TUTORIAL 

OBJECTIVE 

Add an input form to your 
website witness 

TIME REQUIRED 

1 hour 




ONE OF THE most common and useful 
online interactions that web designers and 
developers can do is devote time to 
■=■ encouraging visitors to subscribe to a 
newsletter or blog. Once signed up, visitors can then 
be inciuded in oniine promotional activities and 
hopefuily be converted into paying customers in 
due course. 

To part with an email address, however, visitors need 
to trust the website and be sufficiently interested in the 
product service or blog - even so, this by itself might 
not be enough. Then again, if your website looks the 
part and has an original-looking and slick method for 
encouraging signup, this could provide the extra nudge 
some visitors need in order for you to secure those 
all-important email addresses. 

The technique demonstrated in this tutorial makes 
ingenious use of CSS and JavaScript to create a 3D box 
providing all of the required functionality, user prompts 
and confirmation within the space of a single input field. 
If you want to increase the number of subscribers to 
your website, for example, this could be just the solution 
you are looking for Let's give it a go. 



HTML first 

This technique works in all modern and even 
not-so-modern browsers. Please do check the 
functionality if you need to ensure compatibility with 
older browsers like IE8. The HTML starts with the now 
familiar HTML5 declaration. The customary 'utf-8' 
character set is declared, assuming you use this 
character set. the page title is put in place and the link to 
the stylesheet established. 

001 <!DOCTYPE html> 

002 <html> 

003 <head> 

004 <meta charset=“utf-8”> 

005 <title>Be the first to know</title> 

006 <link rel=“stylesheet” href=”css/ 
screen. css”> 

007 </head> 

008 <body> 

Decoration and heading 

This technique uses Font Awesome icons as 
part of the styling. Here, the envelope class is applied to a 
<div>. The class is used to increase the size of the icon to 
be displayed and to knock back its opacity. The #cuboid 
<div> is the container for the main action and each of the 
four faces of the cuboid are set starting with the 
invitation to 'Subscribe'. 

001 <div class=“envelope”> 

<i class=”fa fa-envelope”></ix/div> 

002 <hl>Be the first to know</hl> 

003 <! — heirarchy; #cuboid > form > 



div*4 (cuboid faces) — > 

004 <div id=”cuboid”> 

005 <form> 

006 <! — #1 hover button — > 

007 <div> 

008 <p class=“cuboid-text”>Subscribe</p> 

009 </div> 

Fill the form 

The text input face has several more elements 
to it, as a submit icon is required. The autocomplete 
property is set to 'off as you don't want the field 
pre-filling with someone else's email address and 
inadvertently sending it to you. Forms will generally 
require a Submit button, but since this is being handled 
within the field, the #submit <div> sets the display of the 
Submit button to 'none'. 

001 <! — #2 text input — > 

002 <div> 

003 <! — Label to trigger #submit — > 

004 <label for=“submit” class=“submit-icon”> 

005 <i class=“fa fa-chevron-right”x/i> 

006 </label> 

007 <input type=“text” id=“email” class= 
“cuboid-text” placeholder= 

“Your Email” autocomplete=“off”/> 

008 <! — hidden submit button — > 

009 <input type=“submit” id=“submit” /> 

010 </div> 

Complete the cuboid 

While the form is being submitted, a short 



message is displayed. The final face of the cuboid (on the 
long side of the cuboid, that is) is used for displaying the 
success message and an icon to enable the form to be 
refreshed and therefore reused. 

001 <! — #3 loading message — > 

002 <div> 

003 <p class=“cuboid-text loader”> 

We’re submitting your request</p> 

004 </div> 

005 <! — #4 success message — > 

006 <div> 

007 <! — reset/retry button — > 

008 <span class=“reset-icon”> 

<i class=“fa fa-ref resh”x/ix/span> 

009 <p class=“cuboid-text”> Thankyou. 

You’re all signed up! </p> 

010 </div> 

011 </form> 

012 </div> 

Join the JavaScript 

Finally, (Query and small JavaScript are 
loaded. You could use a CDN for the jQuery. Remember 
to load a minified version. Occasionally links to an 
uncompressed version at nearly 300kb are found in 
source code. Do your users a favour, use a minified 
version and save about 200kb. The '3dform.]s' weighs 
in at only 34 lines and is less then Ikb. 

001 <!— jQuery — > 

002 <script src=“js/jquery-l. 11.0. min. js”> 
</script> 
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003 <script src=“js/3dform. js”x/script> 

004 </body> 

005 </html> 

Coding the CSS 

The two custom fonts used are imported first. 
The font used for the text is imported from Google's 
content delivery network but the minified Font 
Awesome file is linked locally. You'll also need local 
versions of the Font Awesome EOT, SVG, TTF WOFF 
and OTF files all saved in a fonts folder, which is where 
the font-awesome.min.css expect to find them. 

001 /*Custom fonts - Raleway and FontAwesome*/ 

002 0import url(http://fonts. googleapis.com/ 
css?family=Raleway) ; 

003 0import url(‘font-awesome.min.css’); 

004 * {margin: 0; padding: 0;} 

005 body { 

006 background: url( . . /img/bg. jpg) 
no-repeat center center fixed; 

007 -webkit-background-size: cover; 

008 -moz-background-size: cover; 

009 -o-background-size: cover; 

010 background-size: cover; 

011 padding-top: 150px; 

012 font: normal 18px Raleway; color: 

white; text-align: center; 

013 } 

Start the Styling 

# Raleway has already been set in 'body' as the 
font to be used everywhere on the page, so it's not 



necessary to keep setting this font for each of the page 
elements. The ghostly envelope shape is created by 
increasing a Font Awesome icon's size tenfold and then 
reducing its opacity to 01 (where 1 is completely opaque). 
The container for the form is created here. 









001 /wgeneral styles*/ 






002 hi {font-weight: normal; font-size: 


006 


/*propogate 3d space for children*/ 


36px; margin-bottom: 75px;} 


007 


-webki t-transform-style : preserve-id ; 


003 .envelope i {-webkit-transform: scale(10);- 


008 


transform-style: preserve-id; 


ms-transform: scale(10) ;transform: scale 


009 


/*prevent height collapse as children 


(10); opacity: 0.1;} 




are absolutely positioned*/ 


004 #cuboid { 


010 


height: 40px; 


005 width: 400px; margin: 0 auto; 


011 


/*for smooth animations*/ 


006 /*this also makes #cuboid a container 


012 


-webkit-transition: all 0.35s; 


for absolutely positioned descendants*/ 


013 


transition: all 0.35s; 


007 -webkit-perspective: 1000px; 


014 


} 


008 perspective: 1000px; 






009 } 


Form the faces 




Fleight sets the height of the text area and 


Set the space 


line-height sets the distance between each line of text 


'Preserve-3d' is set to enable the elements to 


(also known as 'leading'). A line-height of 40px positions 


be positioned in 3D space. As the height of the input 


the single line of text in exactly the right place within a 


field is 40px, the elements are translated half that 


40px space. The colour of the loader face is set here 


height to create the illusion of the cuboid being rotated 


together with the animation that is to be used. 


through its centre. Feel free to experiment with the 






transition speed to suit your own requirements. 


001 


/*faces*/ 




002 


.cuboid-text { 



001 


#cuboid form { 


003 


/*each face will be 40px high*/ 


002 


/*counter translate*/ 


004 


line-height: 40px; height: 40px; 


003 


-webkit-transform: translateZ(-20px) ; 


005 


background: hsl(200, 40%, 20%); 


004 


-ms-transform: translateZ(-20px) ; 


006 } 




005 


transform: translateZ(-20px) ; 


007 . 


loader { 
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Choose your colour model 

Every designer must surely be familiar with the 
hexadecimal system for setting colours, which in 
many cases this is the perfectly good ‘go to' 
system for defining your colours. You've probably 
also used the three-digit short form at some point 
as well (eg #09C in place of #0099CC). But, did 
you know 140 different color names are defined in 
HTML and CSS? You’ve probably seen color: 'gray' 
or 'red' but aren't 'palegoldenrod' and 
'papayawhip' worth exploring too? 

There are other systems available that have 
their own uses. RGB and HSL and their more 
advanced counterparts RGBa and HSLa (that 
includes an alpha channel) can certainly make 
things easier for you depending on the colour job 
at hand. If you need transparency you'll certainly 
need to use of these systems, but they can also be 
useful when managing groups of colours as a 
palette or making more intuitive selective changes 
(like the pulsing effect in this tutorial). 



Image; SharkD 
http://isometricland.net 



There are many ways of using 
colour online and you can often achieve 
better results more easily if you choose 
your system carefully 



Top tip 

When influencing online behaviour, 
it’s important to get the balance right 
between giving people enough 
reasons to sign up and not 
distracting them so much 
that they forget to 
actually do it. 



008 background: hsl(200, 40%, 30%); 

009 -webkit-animation: phase Is infinite; 

010 animation: phase Is infinite; 

011 } 

^ ^ Hue, saturation, luminance 

I As HSL colour is specified it's easy to create a 
pulsing effect by animating a colour between different 
saturation values - in this case between 40% and 70%. 
The styling for the email input field is set including the 
white background and the coloured text. Border-box is 
used here in order to ensure that the whole box appears 
within the space allocated. 

001 /*Lets create a pulsating animation for 
the loader face*/ 

002 @-webkit-keyframes phase { 

003 50% {background: hsl(200, 70%, 30%);} 

004 } 

005 @keyframes phase { 

006 50% {background: hsl(200, 70%, 30%);} 

007 } 

008 #email { 

009 background: white; outline: none; 



border: 0 none; 

010 font: inherit; text-align: left; color: 
hsl(200, 40%, 30%); 

011 display: block; width: 100%; padding: 

0 10px; 

012 -webkit-box-sizing: border-box; 

013 -moz-box-sizing: border-box; 

014 box-sizing: border-box; 

015 } 

^ ^ Styled into submission 

I I The default Submit button is rendered invisible 
using display: none. Again, 40px line-height is used to 
ensure the correct vertical positioning of the icons. One of 
the many benefits of using icons from a font file is that you 
can apply all of the font properties to them. Here, HSLa 
colour is used to change the opacity of the icons to 25%. 

001 #submit {display: none;} 

002 .submit-icon, .reset-icon { 

003 position: absolute; top: 0; right: 0; 

004 color: hsla(30, 50%, 30%, 0.20); 

005 line-height: 40px; padding: 0 10px; 

006 /*smooth transitions when user activates 

input and types something*/ 

007 -webkit-transition: all 0.5s; 

008 transition: all 0.5s; 

009 /*to make the icons feel like buttons*/ 

010 cursor: pointer; 

011 } 

Recognise the input 

I The Submit icon is made more prominent once 
content has been entered into this field. The JS shown in 
the Code Library is responsible for adding the '.active' 
class when content has been added to the field. The 



cuboid <div> is defined, positioned absolutely and 
completely fills the container. 

001 /*. active = when the user is typing 
something*/ 

002 .submit-icon. active {color: hsl 
(30, 70%, 70%);} 

003 .reset-icon {color: hsla 

(0, 100%, 100%, 0.25); font-size: 14px;} 

004 #cuboid div {position: absolute; top: 0; 
left: 0; width: 100%;} 

4 0 Rotate the result 

I Watch out here as the vendor prefixes have 
been removed from this step for brevity - make sure 
you check the tutorial files for the full code. Rotating 
each face 90 degrees in the X dimension and moving 
each face in and out by 40px (20px from -20px) 
completes the cuboid illusion. 

001 /*3D transforms. Each face will be rotated 
in multiples of -90deg and moved 20px(half 
of their 40px height) out*/ 

002 #cuboid div:nth-child(l) {transform: 
rotateX(0deg) translateZ(20px);} 

003 #cuboid div:nth-child(2) {transform: 
rotateX(-90deg) translateZ(20px) ; } 

004 #cuboid div:nth-child(3) {transform: 
rotateX(-180deg) translateZ(20px) ; } 

005 #cuboid div:nth-child(4) { transform: 
rotateX(-270deg) translateZ(20px) ; } 

006 /*the form will have 4 states/classes 
(default-r3) for rotation*/ 

007 #cuboid form: hover, 

008 #cuboid form. ready {transform: translate/ 
(-20px) rotateX(90deg);} 
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009 #cuboid form. loading {transform: 
translateZ(-20px) rotateX(180deg) ; } 

010 #cuboid form. complete {transform: 
translateZ(-20px) rotateX(270deg) ; } 



^ A Take it further 

I "t This technique really suits an uitra-minimal 
'Coming soon' page layout - no distractions, just sign up 
please. You could adapt it by creating extra <div>s and 
classes but it would soon become tiresome for the user 
- a little like being forced to open one advent calendar 
door after another but without the reward of chocolate! 




^ C other solutions 

I Having your labels jump out of the way when 
you enter the field has a similar space-saving quality and 
surprise appeal as the single 3D input field, but lends 
itself better to multiple fields. TheCodePlayer also has a 
great solution for this, check it out at thecodeplayer. 
com/walkthrough/animating-float-labels-jquery-css3 




^ O Icons as fonts 

I Font Awesome, used here, is one of the most 
popular icon font solutions but it is by no means the only 
way to go. Fontello provides an incredibly useful online 
tool for creating your own custom icon fonts, so you can 
choose just what you need from a wide range of sets 
and keep the file size down to an absolute minimum. 
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Code library 

Understanding the JavaScript 

While CSS can deliver most of the solution, a sprinkling of JavaScript 
is needed to bring it all together 



When the mouse passes into 
the input field, the '.ready' 
class is added to the #cuhoid 
form <div>. This initiates a 
90-degree rotation and 20px 
translation to expose the first 
face of the input form 



If the user subsequently 
mouses away, the cuboid is 
returned to the default 
hover state - but ohiy if 
nothihg has beeh typed 
into the input field 



More visual feedback is 
provided to the user by 
changing the colour of the 
arrow once content has 
been typed into the field 



The loading class is added 
to the #cuboid form for 
three seconds after the 
form is submitted. If you're 
switching between classes 
in this way, remember that 
when adding a new class 
you need to remove any 
classes that have been 
added previously 




015 //on form submit remove .ready and add .loading to the form 

016 $(“#cuboid form”).submit(function(){ 

017 $(this) . removeClass(“ready”) ,addClass(“loading”) ; 

018 //finish loading in 3s 

019 setTimeout(complete, 3000); 

020 //prevent default form submission 

021 return false; 

022 }) 

023 function complete() 

024 { 

025 $(“#cuboid form”) . removeClass(“loading”) .addClass 
(“complete”) ; 

026 } 

027 //reset/refresh functionality 

028 $(“ . reset-icon”) . click(function(){ 

029 $(“#cuboid form”) . removeClass(“complete”) ; 

030 }) 
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Do you DIY? 

If you have the time. 



skill and inclination, often it will 
be better to create your own 
bespoke forms. However, 
sometimes the smart thing to 
do is to reach for a solution 
that already exists. One relative 
newcomer to the forms party 
is the Barcelona-based 
Typeform - you should 
definitely check out how their 
forms look and work. 
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Design 
layered 
backgrounds 
in Photoshop 

USE PHOTOSHOP CS6 TO MAKE A STUNNING 
PARTIAL-SUBMERSION OCEAN SCENE AND SHOW 
WHAT LIES IN THE DEEP 



TUTORIAL 

OBJECTIVE 

Create a layered 
background for 
your Word Press site 
in Photoshop 

TIME REQUIRED 

45 minutes 




IT'S OFTEN SAID that we know more about 
the moon than we do about the depths of 
our own oceans. Wouldn't it be incredible if 
“ we could see what it is that lives beneath the 
waves? Over the next four pages, you'll learn the 
various techniques required for creating a partial- 
submersion scene; a cross section of the ocean, 
revealing what might be hiding in the depths. 

We'll be using some beautiful stock imagery, 
Photoshop's blending modes and some masking magic 
to create our submersion effect. In this tutorial we'll also 
touch on the blur tools and using colour to set the 
mood of your image. You'll need an Image of an 
elephant or large animal, an image of the ocean, an 
underwater shot and a mountain range. We'll be 
producing a surreal scene but you can use these same 
techniques to create more realistic images. 




r 

i 



if Wouldn’t it be incredible if we could 
see what lives beneath the waves? Here 
you’ll learn the techniques required f f 




m Set up your document 

To get going, open a landscape A4 (210mm x 
297mm) canvas in Photoshop. Make sure your 
resolution is set to 300 dpi and Color Mode Is set to 
RGB. This will be the base for producing your partial 
submersion scene. Place your elephant (or main 
element) into the canvas and resize to fit. 




Cut it out 

Use the Pen or Lasso tool to draw around the 
shape of your elephant. Once you have a selection, go 
to Layer>Layer Mask>Reveal Selection. This should 
mask out any white or background colour and leave 
you with just your elephant. Position the elephant at the 
right side of the canvas, facing left. 
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Add some ocean 

Next, place an image of the ocean onto your 
canvas. A relatively calm, ocean scene with a few waves 
should be perfect Resize the image until it fills your 
whole canvas and covers the whole of your elephant 
We're only going to need the bottom part of this picture 
to create the surface of our ocean. 




Crop the waves 

Lower the Opacity of your ocean picture 
and position it so that the horizon line sits just above 
the elephant's eye. Use the rectangle Marquee tool 
to select the sky section of the waves and use Layer 
Mask>Hide Selection to crop it out. Use the Distort 
tool and drag out the bottom corners of this layer 



Sky’s the limit 

Increase the Opacity of the water to 100%. Then, 
paste in the same image as before. This time, using the 
Marquee tool, select the sky and crop the image. 
Reposition the sky so it's sitting on your newly created 
horizon. Now you should have some greatlooking sky 
above your water layer. Merge the sky and ocean layers. 







Underwater effect 

The water will now look a little intense. To fix 
this, Cmd/Ctrl+click on the elephant layer mask in the 
layers palette, inverse the selection and select the 
ocean layer that's on top. Using a soft brush at 50% 
Opacity, erase the ocean around the elephant before 
setting the blending mode to Hard Light The elephant 
should now look more like it's underwater. 



Blurring the lines 

Next we want to add a bit of perspective to 
the image. Copy your sky and ocean layer and select a 
small section at the bottom. Crop this section and select 
Blur>Gaussian Blur and change the radius to 5px. Move 
it down 1 or 2px from its original position. The front of 
the water should now look out of focus. 



Trees and waterfalls 




01: Add the trees 

Find a tree picture that suits the shape of 
your mountains. Place it into your 
document, lower the opacity and position 
it in place somewhere on your mountains. 




02: Mask the trees 

Add a layer mask to the trees layer, using 
Layer>Layer Mask>Hide All. Then, with a 
50% hardness brush, paint in trees along 
ridges and valleys of your mountains. 




03: Falling water 

Create a scatter brush with 80% scatter and 
create a new layer. Using white, draw 
waterfalls rushing down the mountains. 
Adjust opacity for a more realistic look. 
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Getting rocky 

Now we’re going to create the more surreal 
aspects of our partial-submersion scene. Place your 
mountain image on the canvas. Lower the opacity 
and line it up with your elephant. We're going to 
make it look like the elephant's back is made of 
mountains on an island rising out of the sea. 



Mask the mountains 

Using the Pen or Marquee tool, select just the 
mountains Imaged. Create a layer mask on this layer and, 
using a black brush, erase everything except for the parts 
you want to keep. You may find that you need to sculpt the 
mountains so that they come down to meet the water 
where the elephant’s head does. 






Use adjustment layers 
in Photoshop CS6 

Photoshop’s adjustment layers are a 
fantastic tool for making reversible 
changes to elements such as 
brightness, contrast and saturation. 
Although users can change all of 
these properties through the Image 
option in the toolbar, this only allows 
the user to make permanent changes 
where the image information is 
discarded. Using adjustment layers 
allows users to go back and edit 
properties again and again, to get the 
effect that suits the final work. 

It is also possible to turn them on 
and off like any normal layerto see 
what has been changed and which 
layers are affecting each other. 
Adjustment layers are a must for any 
kind of photo manipulation work, in 
case users go overboard or need to 
back and fix somethingthat went 
wrong. They can also let users 
achieve some pretty cool effects by 
editing multiple layers all at once. 
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Merge mountain and elephant 

Set the blending mode of this texture layer to Soft 



Light. Copy this layer and set the blending mode of the 
new layer to Colour. Change the Opacity to 85%. The first 
texture should give the mountains the elephant skin texture 
and the second one should give you a more elephant-like 
colour, so the two blend together seamlessly. 




1 C Adjustment layers 

I Create a copy of your sky in a new layer, using the 
Marquee tool. In the Adjustments panel, click on Brightness 
and Contrast to add an adjustment layer. Make sure you 
click on the Clip to Layer at the bottom of the Options 
panel. Set Contrast to 100 and Brightness to -92. This will 
give the image a slightly darker sky. 




^ ^ More adjustment layers 

I Create a Hue and Saturation adjustment layer on 
top of the same sky layer we’re working on. Make sure to 
click Clip to Layer, then set the Saturation to -50 and play 
with the Hue to make it a little greener. You can play with 
these options to get the effect you want. 




Elephant texture 

I Create a copy of your elephant layer, then 
Cmd/CtrKclick on the mountains layer mask to make a 
selection. Crop the elephant to this selection so you 
now have an elephant skin texture in the shape of the 
mountain range. Use the clone tool to fill in any gaps 
between the elephant and the top of the mountain. 




1 A some atmosphere 

I "t Now that our partial submersion image is 
coming together, we want to make it a little more moody. 
The bright sunny day doesn’t quite suit the surreal feel 
that we’re going for with this image, so we need to create 
a night-time feel using adjustment layers. 



Top tip 

The techniques here 
could come in handy 
when building a quirky 
parallax website with a 
scrolling land or seascape 
in the background. See 
www.pojeta.cz for a 
great example. 
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^ ^ The murky depths 

I # We still want to make the water feel a little darker to give 
the impression that the elephant's swimming through the depths 
of the ocean. To do this, use the Marquee tool to select the water. 
Choose a deep, sea green and another similar but darker tone and 
create a gradient. Set the blending mode to Multiply and the 
Opacity to 50%. 




Hue and Saturation 

I Our partial-submersion image is nearly complete. Now 
that it's nice and dark, we need to tone down some of those very 
saturated colours. Add another adjustment layer, this time for Hue 
and Saturation. Make sure it's affecting all layers and set the 
Preset option to Old Style. This will tone down the mountains and 
sea for a more subtle look. 




^f\ Add Noise 

To finish off our partial-submersion image, we want 
to add some nice noise. This will make the image pop and add 
to the surreal feel. Create a new layer, under your top two 
adjustment layers, and fill it with white. Go to Filter>Noise> 

Add Noise. Set the amount to 15% and choose Gaussian 
and Monochromatic. 




A O Make it 
I O dark 

The image is definitely 
looking darker but it's not 
quite moody enough yet. 
Add another Brightness 
and Contrast adjustment 
layer, this time making sure 
it affects all the layers below 
it. Set the Brightness at -75 
and Contrast to 100. As 
you'll see, this will darken 
the tone of the whole image. 





Finishing touches 

Select your noise layer and change the blending mode to Multiply. Some areas of the image 
might look a little too noisy. If this is the case, go to Layer>Layer Mask>Reveal All and with a soft, 50% 
Opacity, black brush, go over any areas that need toning down. 





§§ Adjustment layers are a must for any 
kind of photo manipulation work ff 
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Add an 
eCommerce 
web element 
with CSS3 

USING CSS3, CREATE A SIMPLE AND APPEALING 
SHOPPING CART WEB ELEMENT THAT WOULD BE 
USEEUL ON AN ECOMMERCE WEBSITE 



TUTORIAL 

OBJECTIVE 

Get selling online with a 
CSS3 web element 

TIME REQUIRED 

1 hour 




SELLING ONLINE PROVIDES the 
opportunity for many businesses to 
reach out to huge, untapped markets. 

■=■ When your store can be open 24 hours a 
day and you can reach a global market without the 
costs of mailings and call centres, it can provide a 
huge boost to your business. But there are plenty of 
things to consider when designing an eCommerce 
site. It's not as simple as throwing up some shopping 
cart software and plopping products into a database. 
With the power of CSS3, it is possible to create some 
very cool and effective web elements that can just 
slot into place on any eCommerce website. 

The products that you or your client are selling 
need to stand out and the all-important buttons such 
as 'Add to Cart' need to be prominent and stylish. It is 
essential to think about the presentation of customer 
reviews, the price and product description. All of 
these things need to be easy to accomplish, and with 
CSS3, those things just got a whole lot easier. So in 
this tutorial, we will look at how we can create a 
fictional product and turn it into an appealing and 
interactive web element using the power of CSS3 - 
let's get started! 



Set everything up 

First thing we need to do is create a new FITMLS 
document with a link to your stylesheet within the head. 
Then within the <body> tag, we can create two <div>s with 
a class name of 'container' and then 'block', making sure we 
comment the closing tags for better readability. 

001 <body> 

002 

003 <div class=”container”> 

004 

005 <div class=”block”> 

006 

007 </div><! — END block — > 

008 

009 </divx! — END container — > 

010 

011 </body> 

Product image and buttons 

Next we're going to add in an image and some 
buttons for our product. Firstly we create a <div> with a 
class name of 'product'. We then pull in our product image 
and then add in two buttons. One of the buttons is a 'Add 
to Cart' button with a class name of 'buy' and the other is a 
'View Item' button with a class name of 'preview'. 

001 <div class=”product”> 

002 <img src=”images/placeholder.png”> 

003 <div class=”buttons”> 

004 <a class=”buy” href=”#”>Add to cart</a> 

005 <a class=”preview” href=”#”>View item</a> 



006 </div> 

007 

008 </div><! — END product — > 

009 

Product information 

Now let's add in some information about our 
product. Firstly create a <div> with a class name of 'info' and 
then add in the product title, wrapped within a <h4> header 
element. We then add in a little text describing our product 
and then finish off with the price and a 'Buy now' button. 

Star ratings 

In the final bit of FITIVIL. we're going to add in a 
star rating section that will be positioned at the very 
bottom of our product block. We just simply add a <div> 
with a class name of 'details' and create an unordered list 
with a class called "rating’. In a later step, we're going to use 
a CSS sprite to show a different-coloured star. 

001 <div class=”details”> 

002 <span class=”time”>12 hours ago</span> 

003 <ul class=”rating”> 

004 <li class=”rated”x/li> 

005 <li class=”rated”x/li> 

006 <li class=”rated”x/li> 

007 <li class=”rated”x/li> 

008 <lix/li> 

009 <lix/li> 

010 </ul> 

011 </divx! — END details — > 

012 



The CSS 

Open up a CSS file and start adding some styles. 
First add in some default styles within the body selector. 
We've set our font to Arial and given it a light grey colour, 
and we'll use a patterned background for the page. Finish 
off by giving our 'container' <div> some width and margin. 

001 body { 

002 font-family: Arial, sans-serif; 

003 color: #aaaeb2; 

004 background: #flflfl url(“. ./images/ 
bg.png”); 

005 } 

006 

007 .container { 

008 

009 width: 900px; 

010 margin: 0 auto; 

011 } 

Style the block 

Things are not looking that great, so let's start 
shaping it all up. By targeting the 'block' class, we can give 
the body of our product information some shape and 
some nice subtle effects by using the 'border-radius' and 
'box-shadow' properties. We do want to make sure that the 
position is set to relative, as this will allow us to absolutely 
position other elements within - such as the buttons. 

001 .block { 

002 margin: 30px 0; 

003 display: block; 
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004 position: relative; 

005 width: 300px; 

006 border-radius: 5px; 

007 background: #fff; 

008 box-shadow: 0 3px 8px rgba(0, 0, 0, 

. 2 ); 

009 } 

Product image 

Now let's set some styles for our product image. 
Ensure the image is set to block and position is set to 
relative. Then we can set the width to 100% so it drops into 
the main product block. After that, we finish off by giving 
the top corners the same radius as the block. 

001 .product { 

002 display: block; 

003 position: relative; 

004 } 

005 

006 .product img { 

007 width: 100%; 

008 border-top-left-radius: 5px; 

009 border-top-right-radius: 5px; 

010 } 



Info and details 

Next we will give our product text and other 
information some shape. Firstly let's target the 'Info' class, 
which holds the product title and description. We then 
separate the 'details' section - which is the star ratings - by 
adding a top border and then finish this off by giving it 
some padding all around. 

001 .info { 

002 display: block; 

003 position: relative; 

004 padding: 20px; 

005 } 

006 

007 .details { 

008 border-top: Ipx solid #e5e5e5; 

009 padding: 18px 20px; 

010 } 

The large buttons 

The buttons we are talking about here are the 
'Add to Cart' and 'View Item' buttons that we will position at 
the centre of the product image. We then hide them until 
the user mouses over the product image. We won't see 
much in the way of buttons yet, but we'll tackle that soon. 



Button styles 

This Is where we will start giving the buttons 
some basic styling. Because we set the '.product' class to 
relative, we can easily use absolute positioning to give 
ourselves complete control of exactly where these buttons 
should be. We can then give them some nice, rounded 
corners and hide them by using 'opacity O'. 

001 .buttons a { 



002 


display: block; 


003 


position: absolute; 


004 


left : 50px ; 


005 


width: 115px; 


006 


border-radius: 2px; 


007 


padding: 18px 10px 15px 65px; 


008 


font-family: Helvetica, sans-serif; 


009 


font-size: 14px; 


010 


font-weight: bold; 


011 


text-transform: uppercase; 


012 


color: #fff; 


013 


text-decoration: none; 


014 


opacity: 0; 


015 


text-align: center; 


016 } 




017 
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Icon styling 

Here we set some styling for the icons that will be 
added in the next step to both of the large buttons. Make 
sure the content is empty and then set a height and width. 
Then, divide the area where the icon will be by adding a Ipx 
border to the right Then add a subtle drop shadow. 

001 .buttons a::after 

002 { 

003 content: 

004 display: block; 

005 position: absolute; 

006 height: 48px; 

007 width: 50px; 

008 border-right: Ipx solid rgba(0, 0, 0, 

.25); 

009 box-shadow: Ipx 0 0 rgba(255, 255, 255, 

.17); 

010 top: 0; 

011 left: 0; 

012 z-index: 1; 

013 } 

‘Add to Cart’ button 

In this step, we're going to just focus on the 'Add 
to Cart' button. After positioning it 20% from the top, we 
can give it a dark background colour. Then we can give it a 
subtle transition and lower its opacity for when we hover 
over it Lastly, we will add in our icon that will be positioned 
to the left 

001 a. buy { 

002 top: 20%; 



003 background: #414141; 

004 background: rgba(0, 0, 0, .85); 

005 transition: background ,2s ease-in; 

006 } 

007 ,buy:hover { 

008 background: #515151; 

009 background: rgba(45, 45, 45, .85); 

010 } 

011 

012 .buy: :after { 

013 background: url(“. ./images/cart. png”); 

014 background-repeat: no-repeat; 

015 background-position: 16px 18px; 

016 } 

‘View Item’ button 

Next up will be to add the styles to our 'View Item' 
button that will sit underneath the 'Add to Cart' button. We 
are going to give this a blue colour and also give it a linear 
gradient Then, let's give it a subtle drop shadow and finish 
up by giving it a two-second transition on hover. 

001 a. preview { 

002 bottom: 20%; 

003 text-shadow: 0 -Ipx Ipx rgba(0, 0, 0, 

.4); 

004 

005 background: #286398; 

006 background: -webkit-linear- 
gradient(bottom, #ld4970, #639ed3); 

007 background: -moz-linear- 
gradient(bottom, #286398, #639ed3); 

008 background-position: 0 -15px; 



009 background-size: 400px 80px; 

010 background-repeat: no-repeat; 

011 box-shadow: 0 2px 0 #165181; 

012 transition: background-position ,2s 
ease-in; 

013 } 

014 .preview: hover, ,buy_now: hover { 

015 background-position: 0 0; 

016 } 

Finish the buttons 

In this step, we'll add a simple active state on the 
'View Item' button. All we are going to do is move the 
button down by two pixels using the 'translateV value of 
the transform property when we click the button. In the 
next rule, we add in the icon like we did previously. 

001 .preview: active, ,buy_now:active { 

002 transform: translateY(2px) ; 

003 box-shadow: none; 

004 } 

005 

006 .preview: : after { 

007 background: url(“. ./images/eye-icon, 

png”); 

008 background-repeat: no-repeat; 

009 background-position: 16px 17px; 

010 } 

Information arrow 

Let's create the small arrow that we see pointing 
up to the product image just above the product's title. This 
is going to be very simple. All we need to do is create a 
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white 25 X 25px square, position it absolutely and rotate it 
by 45 degrees. Then we move it down using 'top '12px' so 
all we can see is one of the corners. 

001 .info::after 
{ 



002 


display: block; 


003 


position: absolute; 


004 


top: -12px; 


005 


left: 23px; 


006 


content: 


007 


height: 25px; 


008 


background: #fff; 


009 


transform : rotate (45deg) ; 


010 


transform : rotate (45deg) ; 


011 





Product title 

In this simple step, we will apply some styles to 
the product title to give our product description some 
shape. Start by setting the position to relative and giving it 
some padding and margin. Then set the font family, font 
weight and size. Finish up by pulling all the letters in slightly, 
using a negative value to the letter spacing. 

Product description 

Everything is taking shape quite nicely now and 
the next step is to think about the product description. First, 
let’s add a two-pixel blue line just underneath the title. The 
good thing about doing lines like this is the ease at which 
you can change the height Then we give the product 
description some styling. 

001 .info h4::after { 

002 display: block; 

003 position: absolute; 

004 bottom: 0px; 

005 content: 

006 width: 40px; 

007 height: 2px; 

008 background: #3b86c4; 

009 } 

010 

011 .info .description { 

012 display: block; 

013 padding-bottom: 20px; 

014 font-family: Arial, sans-serif; 

015 font-size: 14px; 

016 font-weight: 600; 

017 color: #5f5f5f; 

018 } 

019 

The price 

Flaving now got a lot of the product description 
done, there are only two things left to do, one of which is 
simple: give the product price a little bit of much-needed 
styling. Ensure that you have a play around with this; 
sometimes a bigger font would look better, or perhaps 
even a different colour would work well. 



‘Buy Now’ button 

The ‘Buy Now' button is the last step to finish off 
the product description section. We're going to float this 
right and use relative positioning in order to position it right 
where we want it We're then going to continue to give it 
the same styling as our 'View Item' button - finishing up 
with a nice transition and drop shadow. 

001 ,buy_now { 

002 float: right; 

003 position: relative; 

004 top: -5px; 

005 display: block; 

006 padding: 10px 10px; 

007 border-radius: 3px; 

008 

009 font-family: “Helvetica Neue”, 

Helvetica, Arial, sans-serif; 



010 

011 


color: #fff; 
font-weight: bold; 


012 


text-decoration: none; 


013 


font-size: 


15px; 


014 


text-shadow 


: 0 -Ipx Ipx rgba(0, 0, 0, 


■4); 






015 






016 


background: 


#286398; 


017 


background: 


-webkit-linear- 



gradient (bottom, #ld4970, #639ed3); 

018 background: -moz-linear- 
gradient (bottom, #286398, #639ed3); 

019 background-position: 0 -15px; 

020 background-size: 400px 80px; 

021 background- repeat: no-repeat; 

022 transition: background-position ,2s 
ease-in; 

023 

024 box-shadow: 0 2px 0 #165181; 

025 } 

The rating section 

Flere we deal with the star rating section. We 
position the unordered list over to the right and zero out 
any default margin or padding. Once we do this, the block 
will become shorter and our bullet points will be 
overflowing. Let's sort that out next 

001 . rating { 

002 position: relative; 

003 top: 2px; 

004 float: right; 

005 margin: 0; 

006 padding: 0; 

007 } 

Seeing stars 

On this final CSS rule, we are going to add in our 
stars. We have included a PNG file called 'stars.png' on the 
resource disc that you can use. We're going to use this as a 
CSS sprite and first position the green stars that have the 
class name of '.rated' added to the <li> item. 










The CSS transform property allows you to visually 
manipulate an element transforming its appearance. 
There are many functions to the transform property 
and one we used in this tutorial (Step 14, for example) 
is called "translate". 



transform: translateY(2px) ; 



The translateCx, y) function Is similar to relative 
positioning, translating, or relocating an element by 
X from the left and y from the top. It's a handy way 
to move elements as it gives you full control of its 
positioning from using only one line of code. 



[transform: translate(2px, 10px); 



To give us greater control, we can also use negative 
values on either the x or y values. The line of code 
below, for example, allows us to move an element 
horizontally by 20 pixels. 



Itransform: translateX(-20px) 




001 .rating li { 

002 float: left; 

003 display: block; 

004 height: 16px; 

005 width: 16px; 

006 margin-left: 5px; 

007 background: url(“. ./images/stars. png”) 
no- repeat 0 0; 

008 } 

009 

010 .rating li. rated { 

011 background-position: 0px -16px; 

012 } 

013 



OO Final thoughts 

eCommerce is forever growing on the web. 
and the need to design cool and functional web 
elements is becoming more and more achievable 
when using CSS3. So, experiment with what you've 
learned throughout this tutorial and see what you 
can produce! 
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